@font-face{font-family:'GmarketSansMedium';src:url('/common/fonts/gmarket-medium.woff2') format('woff2');font-weight:normal;font-style:normal;font-display:swap;unicode-range:U+1-1,U+A1-A5,U+A7-AD,U+B0-B4,U+B6-B6,U+B8-BF,U+C6-C6,U+D0-D0,U+D8-D8,U+DE-DF,U+E5-E6,U+F0-F0,U+F7-F8,U+FE-FE,U+111-111,U+126-127,U+131-133,U+138-138,U+13F-142,U+149-14B,U+152-153,U+166-167,U+2C7-2C7,U+2D0-2D0,U+2D8-2DD,U+391-3A1,U+3A3-3A9,U+3B1-3C1,U+3C3-3C9,U+401-401,U+410-44F,U+451-451,U+2010-2010,U+2016-2016,U+2018-2019,U+201C-201D,U+2020-2021,U+2025-2026,U+2030-2030,U+2032-2033,U+203B-203B,U+203E-203E,U+2074-2074,U+207F-207F,U+2081-2084,U+20A9-20A9,U+2103-2103,U+2109-2109,U+2113-2113,U+2116-2116,U+2121-2122,U+2126-2126,U+2153-2154,U+215B-215E,U+2160-2169,U+2170-2179,U+2190-2191,U+2193-2199,U+21D2-21D2,U+21D4-21D4,U+2200-2200,U+2202-2203,U+2207-2208,U+220B-220B,U+220F-220F,U+2211-2211,U+221A-221A,U+221D-221E,U+2220-2220,U+2227-222C,U+222E-222E,U+2234-2235,U+223C-223D,U+2252-2252,U+2260-2261,U+2264-2265,U+2282-2283,U+2286-2287,U+2299-2299,U+22A5-22A5,U+2312-2312,U+2460-246E,U+2474-2482,U+249C-24B5,U+24D0-24D1,U+24D3-24E9,U+2500-2503,U+250C-254B,U+2592-2592,U+25A0-25A1,U+25A3-25A9,U+25B2-25B3,U+25B6-25B7,U+25BC-25BD,U+25C0-25C1,U+25C6-25C8,U+25CB-25CB,U+25CE-25D1,U+2605-2606,U+260E-260F,U+261C-261C,U+261E-261E,U+2640-2640,U+2642-2642,U+2660-2661,U+2663-2665,U+2667-266A,U+266C-266D,U+3000-3003,U+3008-3011,U+3013-3015,U+3041-3093,U+30A1-30F6,U+3131-3163,U+3165-318E,U+3200-321C,U+3260-327B,U+327F-327F,U+3380-3384,U+3388-33A0,U+33A2-33CA,U+33CF-33D0,U+33D3-33D3,U+33D6-33D6,U+33D8-33D8,U+33DB-33DD,U+AC02-AC03,U+AC05-AC0F,U+AC11-AC11,U+AC13-AC14,U+AC17-AC18,U+AC1A-AC1B,U+AC1E-AC6F,U+AC71-AC73,U+AC75-AC7F,U+AC81-AC8B,U+AC8D-AC9E,U+ACA0-ACAB,U+ACAD-ACAF,U+ACB1-ACB8,U+ACBA-ACBC,U+ACBE-ACC3,U+ACC5-ACDF,U+ACE1-ACF4,U+ACF6-ACFB,U+ACFD-ACFF,U+AD01-AD4F,U+AD51-AD6B,U+AD6D-AD8B,U+AD8D-ADDB,U+ADDD-ADF7,U+ADFA-ADFF,U+AE01-AE07,U+AE09-AE2F,U+AE31-AE37,U+AE39-AE3F,U+AE41-AE4B,U+AE4D-AE53,U+AE55-AED7,U+AED9-B053,U+B055-B08B,U+B08D-B097,U+B099-B0A7,U+B0A9-B0AD,U+B0AF-B0B3,U+B0B5-B0BB,U+B0BD-B107,U+B109-B10F,U+B111-B117,U+B119-B143,U+B145-B177,U+B179-B191,U+B193-B207,U+B209-B273,U+B275-B28F,U+B291-B293,U+B295-B2A4,U+B2A6-B2C7,U+B2C9-B2D7,U+B2D9-B2E3,U+B2E5-B2E7,U+B2E9-B2EA,U+B2ED-B2F3,U+B2F5-B2F8,U+B2FA-B2FF,U+B301-B353,U+B356-B36F,U+B371-B377,U+B379-B3C3,U+B3C6-B3D4,U+B3D6-B3D8,U+B3DA-B417,U+B419-B44F,U+B451-B4DB,U+B4DD-B4DF,U+B4E1-B4F0,U+B4F2-B513,U+B515-B528,U+B52A-B52F,U+B531-B77B,U+B77E-B77F,U+B781-B78C,U+B78E-B79B,U+B79D-B7A7,U+B7A9-B7B4,U+B7B6-B7EB,U+B7ED-B807,U+B809-B80B,U+B80D-B824,U+B826-B82B,U+B82D-B85B,U+B85E-B85F,U+B861-B863,U+B865-B8AF,U+B8B1-B8CB,U+B8CD-B957,U+B959-B95F,U+B961-B973,U+B975-B977,U+B979-B97B,U+B97D-B983,U+B985-B988,U+B98A-B9AB,U+B9AE-B9BB,U+B9BD-B9BE,U+B9C0-B9C7,U+B9C9-B9CB,U+B9CD-B9CD,U+B9CF-B9DC,U+B9DF-B9E3,U+B9E5-B9F8,U+B9FA-BA3B,U+BA3D-BA53,U+BA55-BA6F,U+BA71-BA73,U+BA75-BAA7,U+BAAA-BB33,U+BB35-BB35,U+BB37-BB37,U+BB39-BB3B,U+BB3D-BBAB,U+BBAD-BBBF,U+BBC1-BBF7,U+BBF9-BC0E,U+BC10-BC13,U+BC16-BC17,U+BC19-BC1B,U+BC1D-BC28,U+BC2A-BC2F,U+BC32-BC83,U+BC85-BC87,U+BC89-BC93,U+BC96-BCBC,U+BCBE-BCBF,U+BCC1-BCC3,U+BCC5-BCD0,U+BCD2-BCF3,U+BCF6-BCF7,U+BCF9-BD7F,U+BD82-BD83,U+BD85-BE0B,U+BE0D-BE13,U+BE15-BE43,U+BE45-BE4B,U+BE4D-BE5F,U+BE61-C0AB,U+C0AD-C0AF,U+C0B1-C0C0,U+C0C2-C0C7,U+C0CA-C0CB,U+C0CD-C0DC,U+C0DE-C11B,U+C11E-C11F,U+C121-C123,U+C125-C130,U+C132-C137,U+C139-C148,U+C14A-C157,U+C159-C18B,U+C18E-C217,U+C219-C21B,U+C21D-C227,U+C229-C287,U+C289-C2A3,U+C2A5-C2B4,U+C2B6-C2B8,U+C2BA-C2DB,U+C2DE-C2DF,U+C2E1-C2E3,U+C2E5-C2EB,U+C2ED-C4EF,U+C4F1-C543,U+C545-C547,U+C549-C549,U+C54B-C557,U+C55A-C55F,U+C561-C57C,U+C57E-C590,U+C592-C5B3,U+C5B5-C5C3,U+C5C7-C5CF,U+C5D1-C5EB,U+C5EE-C5EF,U+C5F1-C5F3,U+C5F5-C5FF,U+C602-C607,U+C609-C623,U+C625-C63F,U+C641-C643,U+C645-C677,U+C679-C693,U+C695-C6A8,U+C6AA-C6AF,U+C6B1-C6B3,U+C6B5-C6B7,U+C6B9-C6C2,U+C6C4-C6CF,U+C6D1-C703,U+C705-C71F,U+C722-C727,U+C729-C73B,U+C73D-C73F,U+C741-C743,U+C745-C74B,U+C74D-C750,U+C752-C757,U+C759-C773,U+C776-C777,U+C779-C77B,U+C77D-C783,U+C786-C787,U+C789-C78F,U+C792-C797,U+C799-C7A0,U+C7A2-C7A4,U+C7A6-C7AB,U+C7AD-C7FF,U+C802-C803,U+C805-C807,U+C809-C80F,U+C812-C814,U+C816-C81B,U+C81D-C86F,U+C872-C873,U+C875-C884,U+C886-C88B,U+C88D-C8FB,U+C8FD-C8FF,U+C901-C903,U+C905-C910,U+C912-C988,U+C98A-C99C,U+C99E-C9BF,U+C9C2-C9C3,U+C9C5-C9C7,U+C9C9-C9CF,U+C9D2-CC0B,U+CC0D-CC27,U+CC2A-CC3C,U+CC3F-CC43,U+CC45-CC97,U+CC99-CC9F,U+CCA1-CCAA,U+CCAC-CCAC,U+CCAE-CCB3,U+CCB5-CD07,U+CD0A-CD1C,U+CD1E-CD5B,U+CD5D-CD93,U+CD96-CD97,U+CD99-CD9B,U+CD9D-CDA3,U+CDA5-CDAF,U+CDB1-CE20,U+CE22-CE34,U+CE36-CE57,U+CE5A-CE5B,U+CE5D-CE73,U+CE75-CE7B,U+CE7D-CEE3,U+CEE5-CEF3,U+CEF5-CEFF,U+CF01-CF2F,U+CF31-CF57,U+CF59-CFDF,U+CFE1-D06B,U+D06D-D073,U+D075-D0A3,U+D0A5-D0BF,U+D0C1-D0DB,U+D0DE-D14B,U+D14E-D15B,U+D15D-D19F,U+D1A1-D1B4,U+D1B6-D22B,U+D22D-D2B7,U+D2BA-D2FF,U+D301-D304,U+D306-D30B,U+D30D-D30F,U+D311-D31C,U+D31E-D328,U+D32A-D37B,U+D37D-D397,U+D399-D3B7,U+D3B9-D3C8,U+D3CA-D3EB,U+D3EE-D45B,U+D45D-D503,U+D505-D507,U+D509-D53B,U+D53D-D557,U+D559-D55B,U+D55D-D55F,U+D561-D567,U+D56A-D56A,U+D56C-D56C,U+D56E-D573,U+D575-D587,U+D58A-D5C7,U+D5C9-D5D7,U+D5D9-D614,U+D616-D61B,U+D61D-D637,U+D63A-D63F,U+D641-D64C,U+D64E-D653,U+D656-D668,U+D66A-D68B,U+D68E-D6A7,U+D6A9-D6C3,U+D6C5-D76B,U+D76D-D76F,U+D771-D787,U+D789-D7A3,U+FF01-FF5D,U+FFE6-FFE6;} @font-face{font-family:'GmarketSansMedium';src:url('/common/fonts/gmarket-medium-site.woff2') format('woff2');font-weight:normal;font-style:normal;font-display:swap;unicode-range:U+A-A,U+20-7E,U+B7-B7,U+D7-D7,U+2014-2014,U+2192-2192,U+24D2-24D2,U+33A1-33A1,U+AC00-AC01,U+AC04-AC04,U+AC10-AC10,U+AC12-AC12,U+AC15-AC16,U+AC19-AC19,U+AC1C-AC1D,U+AC70-AC70,U+AC74-AC74,U+AC80-AC80,U+AC8C-AC8C,U+AC9F-AC9F,U+ACAC-ACAC,U+ACB0-ACB0,U+ACB9-ACB9,U+ACBD-ACBD,U+ACC4-ACC4,U+ACE0-ACE0,U+ACF5-ACF5,U+ACFC-ACFC,U+AD00-AD00,U+AD50-AD50,U+AD6C-AD6C,U+AD8C-AD8C,U+ADDC-ADDC,U+ADF8-ADF9,U+AE00-AE00,U+AE08-AE08,U+AE30-AE30,U+AE38-AE38,U+AE40-AE40,U+AE4C-AE4C,U+AE54-AE54,U+AED8-AED8,U+B054-B054,U+B08C-B08C,U+B098-B098,U+B0A8-B0A8,U+B0AE-B0AE,U+B0B4-B0B4,U+B0BC-B0BC,U+B108-B108,U+B110-B110,U+B118-B118,U+B144-B144,U+B178-B178,U+B192-B192,U+B208-B208,U+B274-B274,U+B290-B290,U+B294-B294,U+B2A5-B2A5,U+B2C8-B2C8,U+B2D8-B2D8,U+B2E4-B2E4,U+B2E8-B2E8,U+B2EB-B2EC,U+B2F4-B2F4,U+B2F9-B2F9,U+B300-B300,U+B354-B355,U+B370-B370,U+B378-B378,U+B3C4-B3C5,U+B3D5-B3D5,U+B3D9-B3D9,U+B418-B418,U+B450-B450,U+B4DC-B4DC,U+B4E0-B4E0,U+B4F1-B4F1,U+B514-B514,U+B529-B529,U+B530-B530,U+B77C-B77D,U+B780-B780,U+B78D-B78D,U+B79C-B79C,U+B7A8-B7A8,U+B7B5-B7B5,U+B7EC-B7EC,U+B808-B808,U+B80C-B80C,U+B825-B825,U+B82C-B82C,U+B85C-B85D,U+B860-B860,U+B864-B864,U+B8B0-B8B0,U+B8CC-B8CC,U+B958-B958,U+B960-B960,U+B974-B974,U+B978-B978,U+B97C-B97C,U+B984-B984,U+B989-B989,U+B9AC-B9AD,U+B9BC-B9BC,U+B9BF-B9BF,U+B9C8-B9C8,U+B9CC-B9CC,U+B9CE-B9CE,U+B9DD-B9DE,U+B9E4-B9E4,U+B9F9-B9F9,U+BA3C-BA3C,U+BA54-BA54,U+BA70-BA70,U+BA74-BA74,U+BAA8-BAA9,U+BB34-BB34,U+BB36-BB36,U+BB38-BB38,U+BB3C-BB3C,U+BBAC-BBAC,U+BBC0-BBC0,U+BBF8-BBF8,U+BC0F-BC0F,U+BC14-BC15,U+BC18-BC18,U+BC1C-BC1C,U+BC29-BC29,U+BC30-BC31,U+BC84-BC84,U+BC88-BC88,U+BC94-BC95,U+BCBD-BCBD,U+BCC0-BCC0,U+BCC4-BCC4,U+BCD1-BCD1,U+BCF4-BCF5,U+BCF8-BCF8,U+BD80-BD81,U+BD84-BD84,U+BE0C-BE0C,U+BE14-BE14,U+BE44-BE44,U+BE4C-BE4C,U+BE60-BE60,U+C0AC-C0AC,U+C0B0-C0B0,U+C0C1-C0C1,U+C0C8-C0C9,U+C0CC-C0CC,U+C0DD-C0DD,U+C11C-C11D,U+C120-C120,U+C124-C124,U+C131-C131,U+C138-C138,U+C149-C149,U+C158-C158,U+C18C-C18D,U+C218-C218,U+C21C-C21C,U+C228-C228,U+C288-C288,U+C2A4-C2A4,U+C2B5-C2B5,U+C2B9-C2B9,U+C2DC-C2DD,U+C2E0-C2E0,U+C2E4-C2E4,U+C2EC-C2EC,U+C4F0-C4F0,U+C544-C544,U+C548-C548,U+C54A-C54A,U+C558-C559,U+C560-C560,U+C57D-C57D,U+C591-C591,U+C5B4-C5B4,U+C5C4-C5C6,U+C5D0-C5D0,U+C5EC-C5ED,U+C5F0-C5F0,U+C5F4-C5F4,U+C600-C601,U+C608-C608,U+C624-C624,U+C640-C640,U+C644-C644,U+C678-C678,U+C694-C694,U+C6A9-C6A9,U+C6B0-C6B0,U+C6B4-C6B4,U+C6B8-C6B8,U+C6C3-C6C3,U+C6D0-C6D0,U+C704-C704,U+C720-C721,U+C728-C728,U+C73C-C73C,U+C740-C740,U+C744-C744,U+C74C-C74C,U+C751-C751,U+C758-C758,U+C774-C775,U+C778-C778,U+C77C-C77C,U+C784-C785,U+C788-C788,U+C790-C791,U+C798-C798,U+C7A1-C7A1,U+C7A5-C7A5,U+C7AC-C7AC,U+C800-C801,U+C804-C804,U+C808-C808,U+C810-C811,U+C815-C815,U+C81C-C81C,U+C870-C871,U+C874-C874,U+C885-C885,U+C88C-C88C,U+C8FC-C8FC,U+C900-C900,U+C904-C904,U+C911-C911,U+C989-C989,U+C99D-C99D,U+C9C0-C9C1,U+C9C4-C9C4,U+C9C8-C9C8,U+C9D0-C9D1,U+CC0C-CC0C,U+CC28-CC29,U+CC3D-CC3E,U+CC44-CC44,U+CC98-CC98,U+CCA0-CCA0,U+CCAB-CCAB,U+CCAD-CCAD,U+CCB4-CCB4,U+CD08-CD09,U+CD1D-CD1D,U+CD5C-CD5C,U+CD94-CD95,U+CD98-CD98,U+CD9C-CD9C,U+CDA4-CDA4,U+CDB0-CDB0,U+CE21-CE21,U+CE35-CE35,U+CE58-CE59,U+CE5C-CE5C,U+CE74-CE74,U+CE7C-CE7C,U+CEE4-CEE4,U+CEF4-CEF4,U+CF00-CF00,U+CF30-CF30,U+CF58-CF58,U+CFE0-CFE0,U+D06C-D06C,U+D074-D074,U+D0A4-D0A4,U+D0C0-D0C0,U+D0DC-D0DD,U+D14C-D14D,U+D15C-D15C,U+D1A0-D1A0,U+D1B5-D1B5,U+D22C-D22C,U+D2B8-D2B9,U+D300-D300,U+D305-D305,U+D30C-D30C,U+D310-D310,U+D31D-D31D,U+D329-D329,U+D37C-D37C,U+D398-D398,U+D3B8-D3B8,U+D3C9-D3C9,U+D3EC-D3ED,U+D45C-D45C,U+D504-D504,U+D508-D508,U+D53C-D53C,U+D558-D558,U+D55C-D55C,U+D560-D560,U+D568-D569,U+D56B-D56B,U+D56D-D56D,U+D574-D574,U+D588-D589,U+D5C8-D5C8,U+D5D8-D5D8,U+D615-D615,U+D61C-D61C,U+D638-D639,U+D640-D640,U+D64D-D64D,U+D654-D655,U+D669-D669,U+D68C-D68D,U+D6A8-D6A8,U+D6C4-D6C4,U+D76C-D76C,U+D770-D770,U+D788-D788;} @font-face{font-family:Pretendard;src:url('/common/fonts/pretendard-variable-full.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+A0-B6,U+B8-D6,U+D8-148,U+14A-1C3,U+1C5-31E,U+321-377,U+37A-37F,U+384-38A,U+38C-38C,U+38E-3A1,U+3A3-3E1,U+3F0-49D,U+4A0-4FF,U+52F-52F,U+E3F-E3F,U+1D43-1D43,U+1D47-1D49,U+1D4D-1D4D,U+1D4F-1D50,U+1D52-1D52,U+1D56-1D58,U+1D5B-1D5B,U+1D62-1D65,U+1D9C-1D9C,U+1DA0-1DA0,U+1DBB-1DBB,U+1DBF-1DF5,U+1DFC-1F15,U+1F18-1F1D,U+1F20-1F45,U+1F48-1F4D,U+1F50-1F57,U+1F59-1F59,U+1F5B-1F5B,U+1F5D-1F5D,U+1F5F-1F7D,U+1F80-1FB4,U+1FB6-1FC4,U+1FC6-1FD3,U+1FD6-1FDB,U+1FDD-1FEF,U+1FF2-1FF4,U+1FF6-1FFE,U+2000-200D,U+2010-2013,U+2015-2027,U+202F-2060,U+2070-2071,U+2074-208E,U+2090-209C,U+20A0-20BF,U+20DB-20DE,U+20E8-20E8,U+20F0-20F0,U+2100-2101,U+2103-2103,U+2105-2106,U+2109-2109,U+2113-2113,U+2116-2117,U+211E-2123,U+2126-2126,U+212A-212B,U+212E-212E,U+2132-2132,U+213B-213B,U+214D-214D,U+214F-214F,U+2153-2153,U+215A-2188,U+2190-2191,U+2193-2199,U+21A9-21AA,U+21B0-21B1,U+21B3-21B5,U+21BA-21BB,U+21D0-21D0,U+21D2-21D2,U+21D4-21D4,U+21DE-21DF,U+21E4-21E5,U+21E7-21E7,U+21EA-21EA,U+2202-2202,U+2205-2206,U+220F-220F,U+2211-2212,U+221A-221A,U+221E-221E,U+222B-222B,U+2248-2248,U+2260-2260,U+2264-2265,U+226A-226B,U+22EF-22EF,U+2303-2303,U+2305-2305,U+2318-2318,U+2325-2327,U+2329-232B,U+2380-2380,U+2387-2387,U+238B-238B,U+23CE-23CF,U+2423-2423,U+2460-2473,U+24B6-24CF,U+24EA-24F4,U+24FF-24FF,U+25A0-25A2,U+25AA-25AA,U+25B2-25B3,U+25B6-25B7,U+25BA-25BD,U+25C0-25C1,U+25C4-25C7,U+25CA-25CB,U+25CF-25CF,U+25E6-25E6,U+25EF-25EF,U+2600-2600,U+2605-2606,U+263C-263C,U+2661-2661,U+2665-2665,U+266A-266A,U+26A0-26A0,U+2713-2713,U+2717-2717,U+2756-2756,U+2776-2789,U+27EF-27EF,U+27F5-27FA,U+2985-2986,U+2B06-2B06,U+2B12-2B13,U+2B1C-2B1C,U+2C7C-2C7C,U+2C7F-2C7F,U+2DFF-2DFF,U+2E18-2E18,U+3000-3003,U+3008-3011,U+3014-301F,U+3041-3094,U+3099-309E,U+30A1-30FE,U+3131-3164,U+318D-318D,U+321C-321C,U+3380-3384,U+3388-33A0,U+33A2-33CA,U+33CF-33D0,U+33D3-33D3,U+33D6-33D6,U+33D8-33D8,U+33DB-33DD,U+A69F-A69F,U+A7FF-A7FF,U+A92E-A92E,U+AC02-AC03,U+AC05-AC0F,U+AC11-AC11,U+AC13-AC14,U+AC17-AC18,U+AC1A-AC1B,U+AC1E-AC6F,U+AC71-AC73,U+AC75-AC7F,U+AC81-AC8B,U+AC8D-AC9E,U+ACA0-ACAB,U+ACAD-ACAF,U+ACB1-ACB8,U+ACBA-ACBC,U+ACBE-ACC3,U+ACC5-ACDF,U+ACE1-ACF4,U+ACF6-ACFB,U+ACFD-ACFF,U+AD01-AD4F,U+AD51-AD6B,U+AD6D-AD8B,U+AD8D-ADDB,U+ADDD-ADF7,U+ADFA-ADFF,U+AE01-AE07,U+AE09-AE2F,U+AE31-AE37,U+AE39-AE3F,U+AE41-AE4B,U+AE4D-AE53,U+AE55-AED7,U+AED9-B053,U+B055-B08B,U+B08D-B097,U+B099-B0A7,U+B0A9-B0AD,U+B0AF-B0B3,U+B0B5-B0BB,U+B0BD-B107,U+B109-B10F,U+B111-B117,U+B119-B143,U+B145-B177,U+B179-B191,U+B193-B207,U+B209-B273,U+B275-B28F,U+B291-B293,U+B295-B2A4,U+B2A6-B2C7,U+B2C9-B2D7,U+B2D9-B2E3,U+B2E5-B2E7,U+B2E9-B2EA,U+B2ED-B2F3,U+B2F5-B2F8,U+B2FA-B2FF,U+B301-B353,U+B356-B36F,U+B371-B377,U+B379-B3C3,U+B3C6-B3D4,U+B3D6-B3D8,U+B3DA-B417,U+B419-B44F,U+B451-B4DB,U+B4DD-B4DF,U+B4E1-B4F0,U+B4F2-B513,U+B515-B528,U+B52A-B52F,U+B531-B77B,U+B77E-B77F,U+B781-B78C,U+B78E-B79B,U+B79D-B7A7,U+B7A9-B7B4,U+B7B6-B7EB,U+B7ED-B807,U+B809-B80B,U+B80D-B824,U+B826-B82B,U+B82D-B85B,U+B85E-B85F,U+B861-B863,U+B865-B8AF,U+B8B1-B8CB,U+B8CD-B957,U+B959-B95F,U+B961-B973,U+B975-B977,U+B979-B97B,U+B97D-B983,U+B985-B988,U+B98A-B9AB,U+B9AE-B9BB,U+B9BD-B9BE,U+B9C0-B9C7,U+B9C9-B9CB,U+B9CD-B9CD,U+B9CF-B9DC,U+B9DF-B9E3,U+B9E5-B9F8,U+B9FA-BA3B,U+BA3D-BA53,U+BA55-BA6F,U+BA71-BA73,U+BA75-BAA7,U+BAAA-BB33,U+BB35-BB35,U+BB37-BB37,U+BB39-BB3B,U+BB3D-BBAB,U+BBAD-BBBF,U+BBC1-BBF7,U+BBF9-BC0E,U+BC10-BC13,U+BC16-BC17,U+BC19-BC1B,U+BC1D-BC28,U+BC2A-BC2F,U+BC32-BC83,U+BC85-BC87,U+BC89-BC93,U+BC96-BCBC,U+BCBE-BCBF,U+BCC1-BCC3,U+BCC5-BCD0,U+BCD2-BCF3,U+BCF6-BCF7,U+BCF9-BD7F,U+BD82-BD83,U+BD85-BE0B,U+BE0D-BE13,U+BE15-BE43,U+BE45-BE4B,U+BE4D-BE5F,U+BE61-C0AB,U+C0AD-C0AF,U+C0B1-C0C0,U+C0C2-C0C7,U+C0CA-C0CB,U+C0CD-C0DC,U+C0DE-C11B,U+C11E-C11F,U+C121-C123,U+C125-C130,U+C132-C137,U+C139-C148,U+C14A-C157,U+C159-C18B,U+C18E-C217,U+C219-C21B,U+C21D-C227,U+C229-C287,U+C289-C2A3,U+C2A5-C2B4,U+C2B6-C2B8,U+C2BA-C2DB,U+C2DE-C2DF,U+C2E1-C2E3,U+C2E5-C2EB,U+C2ED-C4EF,U+C4F1-C543,U+C545-C547,U+C549-C549,U+C54B-C557,U+C55A-C55F,U+C561-C57C,U+C57E-C590,U+C592-C5B3,U+C5B5-C5C3,U+C5C7-C5CF,U+C5D1-C5EB,U+C5EE-C5EF,U+C5F1-C5F3,U+C5F5-C5FF,U+C602-C607,U+C609-C623,U+C625-C63F,U+C641-C643,U+C645-C677,U+C679-C693,U+C695-C6A8,U+C6AA-C6AF,U+C6B1-C6B3,U+C6B5-C6B7,U+C6B9-C6C2,U+C6C4-C6CF,U+C6D1-C703,U+C705-C71F,U+C722-C727,U+C729-C73B,U+C73D-C73F,U+C741-C743,U+C745-C74B,U+C74D-C750,U+C752-C757,U+C759-C773,U+C776-C777,U+C779-C77B,U+C77D-C783,U+C786-C787,U+C789-C78F,U+C792-C797,U+C799-C7A0,U+C7A2-C7A4,U+C7A6-C7AB,U+C7AD-C7FF,U+C802-C803,U+C805-C807,U+C809-C80F,U+C812-C814,U+C816-C81B,U+C81D-C86F,U+C872-C873,U+C875-C884,U+C886-C88B,U+C88D-C8FB,U+C8FD-C8FF,U+C901-C903,U+C905-C910,U+C912-C988,U+C98A-C99C,U+C99E-C9BF,U+C9C2-C9C3,U+C9C5-C9C7,U+C9C9-C9CF,U+C9D2-CC0B,U+CC0D-CC27,U+CC2A-CC3C,U+CC3F-CC43,U+CC45-CC97,U+CC99-CC9F,U+CCA1-CCAA,U+CCAC-CCAC,U+CCAE-CCB3,U+CCB5-CD07,U+CD0A-CD1C,U+CD1E-CD5B,U+CD5D-CD93,U+CD96-CD97,U+CD99-CD9B,U+CD9D-CDA3,U+CDA5-CDAF,U+CDB1-CE20,U+CE22-CE34,U+CE36-CE57,U+CE5A-CE5B,U+CE5D-CE73,U+CE75-CE7B,U+CE7D-CEE3,U+CEE5-CEF3,U+CEF5-CEFF,U+CF01-CF2F,U+CF31-CF57,U+CF59-CFDF,U+CFE1-D06B,U+D06D-D073,U+D075-D0A3,U+D0A5-D0BF,U+D0C1-D0DB,U+D0DE-D14B,U+D14E-D15B,U+D15D-D19F,U+D1A1-D1B4,U+D1B6-D22B,U+D22D-D2B7,U+D2BA-D2FF,U+D301-D304,U+D306-D30B,U+D30D-D30F,U+D311-D31C,U+D31E-D328,U+D32A-D37B,U+D37D-D397,U+D399-D3B7,U+D3B9-D3C8,U+D3CA-D3EB,U+D3EE-D45B,U+D45D-D503,U+D505-D507,U+D509-D53B,U+D53D-D557,U+D559-D55B,U+D55D-D55F,U+D561-D567,U+D56A-D56A,U+D56C-D56C,U+D56E-D573,U+D575-D587,U+D58A-D5C7,U+D5C9-D5D7,U+D5D9-D614,U+D616-D61B,U+D61D-D637,U+D63A-D63F,U+D641-D64C,U+D64E-D653,U+D656-D668,U+D66A-D68B,U+D68E-D6A7,U+D6A9-D6C3,U+D6C5-D76B,U+D76D-D76F,U+D771-D787,U+D789-D7A3,U+E000-E000,U+E002-E05E,U+E06A-E080,U+E093-E096,U+E0A5-E0E6,U+E0F3-E11C,U+E11E-E12A,U+E131-E147,U+E14E-E164,U+EE01-EE05,U+F000-F057,U+F6C3-F6C3,U+FE20-FE2D,U+FEFF-FEFF,U+FF01-FF60,U+FFA1-FFBE,U+FFC2-FFC7,U+FFCA-FFCF,U+FFD2-FFD7,U+FFDA-FFDC,U+FFE0-FFE1,U+FFE5-FFE6,U+1F10B-1F10B,U+1F12F-1F149,U+1F150-1F16B,U+1F170-1F189,U+1F850-1F850,U+1F852-1F852,U+F0000-F0002;} @font-face{font-family:Pretendard;src:url('/common/fonts/pretendard-variable-site.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+A,U+20,U+21,U+22,U+23,U+24,U+25,U+26,U+27,U+28,U+29,U+2A,U+2B,U+2C,U+2D,U+2E,U+2F,U+30,U+31,U+32,U+33,U+34,U+35,U+36,U+37,U+38,U+39,U+3A,U+3B,U+3C,U+3D,U+3E,U+3F,U+40,U+41,U+42,U+43,U+44,U+45,U+46,U+47,U+48,U+49,U+4A,U+4B,U+4C,U+4D,U+4E,U+4F,U+50,U+51,U+52,U+53,U+54,U+55,U+56,U+57,U+58,U+59,U+5A,U+5B,U+5C,U+5D,U+5E,U+5F,U+60,U+61,U+62,U+63,U+64,U+65,U+66,U+67,U+68,U+69,U+6A,U+6B,U+6C,U+6D,U+6E,U+6F,U+70,U+71,U+72,U+73,U+74,U+75,U+76,U+77,U+78,U+79,U+7A,U+7B,U+7C,U+7D,U+7E,U+B7,U+D7,U+2014,U+2192,U+24D2,U+33A1,U+AC00,U+AC01,U+AC04,U+AC10,U+AC12,U+AC15,U+AC16,U+AC19,U+AC1C,U+AC1D,U+AC70,U+AC74,U+AC80,U+AC8C,U+AC9F,U+ACAC,U+ACB0,U+ACB9,U+ACBD,U+ACC4,U+ACE0,U+ACF5,U+ACFC,U+AD00,U+AD50,U+AD6C,U+AD8C,U+ADDC,U+ADF8,U+ADF9,U+AE00,U+AE08,U+AE30,U+AE38,U+AE40,U+AE4C,U+AE54,U+AED8,U+B054,U+B08C,U+B098,U+B0A8,U+B0AE,U+B0B4,U+B0BC,U+B108,U+B110,U+B118,U+B144,U+B178,U+B192,U+B208,U+B274,U+B290,U+B294,U+B2A5,U+B2C8,U+B2D8,U+B2E4,U+B2E8,U+B2EB,U+B2EC,U+B2F4,U+B2F9,U+B300,U+B354,U+B355,U+B370,U+B378,U+B3C4,U+B3C5,U+B3D5,U+B3D9,U+B418,U+B450,U+B4DC,U+B4E0,U+B4F1,U+B514,U+B529,U+B530,U+B77C,U+B77D,U+B780,U+B78D,U+B79C,U+B7A8,U+B7B5,U+B7EC,U+B808,U+B80C,U+B825,U+B82C,U+B85C,U+B85D,U+B860,U+B864,U+B8B0,U+B8CC,U+B958,U+B960,U+B974,U+B978,U+B97C,U+B984,U+B989,U+B9AC,U+B9AD,U+B9BC,U+B9BF,U+B9C8,U+B9CC,U+B9CE,U+B9DD,U+B9DE,U+B9E4,U+B9F9,U+BA3C,U+BA54,U+BA70,U+BA74,U+BAA8,U+BAA9,U+BB34,U+BB36,U+BB38,U+BB3C,U+BBAC,U+BBC0,U+BBF8,U+BC0F,U+BC14,U+BC15,U+BC18,U+BC1C,U+BC29,U+BC30,U+BC31,U+BC84,U+BC88,U+BC94,U+BC95,U+BCBD,U+BCC0,U+BCC4,U+BCD1,U+BCF4,U+BCF5,U+BCF8,U+BD80,U+BD81,U+BD84,U+BE0C,U+BE14,U+BE44,U+BE4C,U+BE60,U+C0AC,U+C0B0,U+C0C1,U+C0C8,U+C0C9,U+C0CC,U+C0DD,U+C11C,U+C11D,U+C120,U+C124,U+C131,U+C138,U+C149,U+C158,U+C18C,U+C18D,U+C218,U+C21C,U+C228,U+C288,U+C2A4,U+C2B5,U+C2B9,U+C2DC,U+C2DD,U+C2E0,U+C2E4,U+C2EC,U+C4F0,U+C544,U+C548,U+C54A,U+C558,U+C559,U+C560,U+C57D,U+C591,U+C5B4,U+C5C4,U+C5C5,U+C5C6,U+C5D0,U+C5EC,U+C5ED,U+C5F0,U+C5F4,U+C600,U+C601,U+C608,U+C624,U+C640,U+C644,U+C678,U+C694,U+C6A9,U+C6B0,U+C6B4,U+C6B8,U+C6C3,U+C6D0,U+C704,U+C720,U+C721,U+C728,U+C73C,U+C740,U+C744,U+C74C,U+C751,U+C758,U+C774,U+C775,U+C778,U+C77C,U+C784,U+C785,U+C788,U+C790,U+C791,U+C798,U+C7A1,U+C7A5,U+C7AC,U+C800,U+C801,U+C804,U+C808,U+C810,U+C811,U+C815,U+C81C,U+C870,U+C871,U+C874,U+C885,U+C88C,U+C8FC,U+C900,U+C904,U+C911,U+C989,U+C99D,U+C9C0,U+C9C1,U+C9C4,U+C9C8,U+C9D0,U+C9D1,U+CC0C,U+CC28,U+CC29,U+CC3D,U+CC3E,U+CC44,U+CC98,U+CCA0,U+CCAB,U+CCAD,U+CCB4,U+CD08,U+CD09,U+CD1D,U+CD5C,U+CD94,U+CD95,U+CD98,U+CD9C,U+CDA4,U+CDB0,U+CE21,U+CE35,U+CE58,U+CE59,U+CE5C,U+CE74,U+CE7C,U+CEE4,U+CEF4,U+CF00,U+CF30,U+CF58,U+CFE0,U+D06C,U+D074,U+D0A4,U+D0C0,U+D0DC,U+D0DD,U+D14C,U+D14D,U+D15C,U+D1A0,U+D1B5,U+D22C,U+D2B8,U+D2B9,U+D300,U+D305,U+D30C,U+D310,U+D31D,U+D329,U+D37C,U+D398,U+D3B8,U+D3C9,U+D3EC,U+D3ED,U+D45C,U+D504,U+D508,U+D53C,U+D558,U+D55C,U+D560,U+D568,U+D569,U+D56B,U+D56D,U+D574,U+D588,U+D589,U+D5C8,U+D5D8,U+D615,U+D61C,U+D638,U+D639,U+D640,U+D64D,U+D654,U+D655,U+D669,U+D68C,U+D68D,U+D6A8,U+D6C4,U+D76C,U+D770,U+D788;} img{height:auto;} /* common.css */ /* 프리텐다드 폰트 */ /* 지마켓 폰트 */ :root{ --main-color: #d0112c; } /*============================================================================================================ 리셋 ============================================================================================================*/ *{outline:0!important; box-sizing:border-box;} html,body,h1,h2,h3,h4,h5,h6,div,p,blockquote,pre,code,address,ul,ol,li,menu,nav,section,article,aside,dl,dt,dd,table,thead,tbody,tfoot,label,caption,th,td,form,fieldset,legend,hr,input,button,textarea,object,figure,figcaption {margin:0;padding:0;} html,body{width:100%;} html{font-family:sans-serif;} body{width:100%;background:#fff;min-width:280px; -ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-text-size-adjust:100%;word-wrap:break-word;word-break:keep-all; letter-spacing:-0.5px;} body,input,select,textarea,button{border:none;font-size:12px;font-family: 'GmarketSansMedium', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;color:#000;} ul,ol,li{list-style:none;} table{width:100%;border-spacing:0;border-collapse:collapse;} img,fieldset{width:100%;border:0;} address,cite,code,em{font-style:normal;font-weight:normal;} label,img,input,select,textarea,button{vertical-align:middle;} .hide,caption,legend{line-height:0;font-size:1px;overflow:hidden;} hr{display:none;} main,header,section,nav,footer,aside,article,figure{display:block;} a{color:#000; text-decoration:none;} img,svg {width:auto; max-width:100%;} /* Selection */ ::-moz-selection {background:rgba(0,0,0,0.5); color:#fff; } ::selection {background:rgba(0,0,0,0.5); color:#fff;} /* Kakao Map */ .root_daum_roughmap {width:100%!important; border-radius:0!important; border:none!important; padding:0!important;} .root_daum_roughmap .wrap_controllers {display:none!important;} /* Fonts */ .montserrat {font-family:'Montserrat', sans-serif;} .pretendard {font-family:Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;} .noto {font-family: 'Noto Serif KR', serif;} .snowFont{font-family: 'SF_HambakSnow', serif;} .thefaceshop {font-family:'THEFACESHOP INKLIPQUID';} .clearfix:before, .clearfix:after { display: block;line-height: 0;} .clearfix:after {clear:both;} .clearfix {*zoom: 1;} /* ****************** SETTING ********************** */ *::-webkit-scrollbar{width: 8px;} *::-webkit-scrollbar-thumb{background-color:var(--main-color); border-radius:0px; transition:all 0.5s;} *::-webkit-scrollbar-track{background-color:#d0112c; background:rgba(255,255,255,0.5); border-radius:0;} /*============================================================================================================ 레이아웃 ============================================================================================================*/ .inner {position:relative; max-width:1440px; width:100%; margin:0 auto; padding:0 20px; } .inner:after {display:block; clear:both; content:'';} .only_pc {display:block;} .only_m {display:none;} @media all and (max-width:1024px){ } @media all and (max-width:768px){ .only_pc {display:none;} .only_m {display:block;} .inner {padding:0 15px;} } /*============================================================================================================ 헤더 ============================================================================================================*/ :root { --header-height-:150px; --header-scroll-height-:75px; --header-open-height-:350px; --toggle-height-: 20px; } /* HEADER */ .header {position: fixed;top: 0;left: 0;width: 100%;z-index: 999; } .header .inner {display: flex;align-items: center; justify-content: center; max-width:1860px; height: var(--header-height-); transition:all 0.3s ease;} .header .logo {position:absolute; left:20px; width:232px; z-index:100; transition:all 0.3s ease; } .header .logo a {} .header #parallax__nav {position:relative; display:flex; align-items: center; transition:all 0.3s ease; } .header #parallax__nav > ul {display:inline-flex;} .header #parallax__nav > ul > li {position:relative; display:inline-block; text-align:center; vertical-align:top; transition:all 0.3s ease;} .header #parallax__nav > ul > li.none {display:none;} .header #parallax__nav > ul > li:hover {transition:all 0.3s;} .header #parallax__nav > ul > li:last-child {} .header #parallax__nav > ul > li > a {display:block; position:relative; margin:0 30px; text-align:center; font-size:19px; transition:all 0.5s ease; color:#111; line-height:1.6;} .header #parallax__nav li a.active {color: #d0112c; border-radius: 50%;} .header #parallax__nav li a.active:after {} .header #parallax__nav li a:after{content: "";position: absolute;bottom: 0;left: 0;width: 0;height: 2px;background: #d0112c;transition: width .3s ease;} .header #parallax__nav li a.active:after{width: 100%;} /* header etc */ .header .etc .toggleBtn { } .header .etc .callBtn { } .header .etc .callBtn a {display:block; width:220px; height:45px; text-align:center; background:#d0112c; font-size:20px; color:#fff; line-height:47px; transition:all 0.3s;} .header .etc .callBtn a strong {margin:0 0 0 5px;} .header .etc {display:flex; position:absolute; right:20px; z-index:5500;} .header .etc ul {display:flex; align-items: center;} .header .etc .toggle {position:relative; display:block; width:20px; height:20px;} .header .etc .toggle .round{display:block; position:absolute; width:6px; height:6px; background-color:#777; border-radius:50%;} .header .etc .toggle .round:nth-child(1){left:0; top:0;;} .header .etc .toggle .round:nth-child(2){right:0px; top:0;} .header .etc .toggle .round:nth-child(3){left:0; bottom:0;} .header .etc .toggle .round:nth-child(4){right:0px; bottom:0px;} .header .etc .toggle .menuIco { position: relative; width: 20px; height: 20px; transition: 0.3s cubic-bezier(.8, .5, .2, 1.4) 0s;} .header .etc .toggle.active .menuIco{transform: rotate(180deg);} .header .etc ul li .toggle.active span:nth-child(1) {right:-2px; top:50%; margin-top:0; width:25px; height:2px; transform:rotate(45deg); } .header .etc ul li .toggle.active span:nth-child(2) {display:none; right:0; opacity:0;} .header .etc ul li .toggle.active span:nth-child(3) {right:-2px; top:50%; margin-bottom:0; width:25px; height:2px; transform:rotate(-45deg)} .header .etc ul li .toggle.active span:nth-child(4) {display:none; left:0; opacity:0;} .header .etc ul li .toggle.active span {} /* header scroll */ .header.scroll {transition:all 0.3s ease; background:#e6e0ca; } .header.scroll .inner {height: var(--header-scroll-height-); } .header.scroll .logo {width:160px; transition:all 0.3s ease; } .header.scroll .etc .callBtn a {} .header.scroll .logo a {} .header.scroll .etc .toggle .round {} @media all and (max-width:1600px){ .header .logo {left:20px; } .header.scroll .logo { } } @media all and (max-width:1400px){ :root { --header-height-:130px; --header-scroll-height-:75px; } .header .logo {width:200px;} .header #parallax__nav > ul > li > a {margin:0 20px; font-size:18px; } .header .etc .callBtn a {font-size:18px; width:200px;} } @media all and (max-width:1200px){ :root { --header-height-:110px; --header-on-height-:75px; } .header .logo {width:190px;} .header #parallax__nav > ul > li > a {margin:0 10px;} .header .etc .callBtn a {width:auto; height:auto; padding: 10px; line-height:1; font-size:16px;} } @media all and (max-width:1024px){ :root { --header-height-:100px; --header-on-height-:70px; } .header .logo {width:160px;} .header #parallax__nav > ul > li > a {margin:0 11px; font-size:16px;} .header.scroll .etc .callBtn a {height:auto; line-height:1;} .header .etc .toggleBtn {display:none; } .header .inner {justify-content: flex-end;} } @media all and (max-width:768px){ :root { --header-height-:50px; --header-scroll-height-:50px; --header-on-height-:60px; --toggle-height-: 20px; } .header {height:calc(50px + 6.5vw);} .header #parallax__nav {position:absolute;justify-content: center; top:var(--header-height-); width:100%; height:6.5vw; } .header .logo {width:30vw; max-width:135px; left:15px; } .header.scroll .logo {width:28vw; max-width:135px; } .header .inner {justify-content: center; height:var(--header-height-);} .header.scroll #parallax__nav {background:#e6e0ca;} .header #parallax__nav > ul {width:100%; justify-content: center;} .header #parallax__nav > ul > li {} .header #parallax__nav > ul > li > a { margin:0 1.1vw; font-size:3.3vw; line-height:1.8; } .header .etc {right:15px;} .header .etc .toggleBtn {display:block;} .header .etc .callBtn a {padding:1.8vw 2vw 1.4vw; font-size:3.2vw; } } /* 토글 */ body.tgop {overflow:hidden;} .header .tgbox {position:fixed; display:none; width:100%; height:100vh; top:0; left:0; bottom:0; right:0; background:noneno-repeat left bottom #f0ede9;z-index:99; overflow:auto;} .header .tgbox.active {display:block;} .header .tgmenu h3.tit {padding:0 20px; font-size:42px; text-align:left;} .header .tgbox .mask {display:none; position:fixed; width:100%; height:100%; background:rgba(255,255,255,0.6); } .header .tgmenu {display: flex;flex-direction: column; justify-content: center; max-width:1440px; padding:0 20px; margin:auto; height:100%; min-height:600px; box-sizing:border-box;} .header .tgmenu > ul {display: flex; flex-wrap:wrap; width: 100%; padding:30px 0; min-height:350px;} .header .tgmenu > ul:after {} .header .tgmenu > ul > li {position:relative; overflow:hidden; width:25%; padding:20px 20px; transition:all 0.3s ease; } .header .tgmenu > ul > li:last-child:after {display:none;} .header .tgmenu > ul > li > h2 {position:relative; display:none; font-size:24px; font-weight:700; color:#333; cursor:pointer; } .header .tgmenu > ul > li > a {position:relative; display:block; padding:0 0 15px; font-size:24px; font-weight:700; color:#111; border-bottom: 1px solid rgba(0,0,0,0.2); } .header .tgmenu > ul > li > ul {display:block; padding:15px 0 0;} .header .tgmenu > ul > li > ul > li {display:block; } .header .tgmenu > ul > li > ul > li > a {position:relative; display:inline-block; margin:0 0 10px; font-size:17px; font-weight:500; color:#111; } .header .tgmenu > ul > li > ul > li > a:before {display: block; content:""; width: 0; height: 1px; background: #8c5f46; position:absolute; left:0; bottom:-2px; opacity:0; transition:all 0.4s ease-in-out;} .header .tgmenu > ul > li > ul > li:hover > a:before {opacity:1; width: 100%;} .header .tgmenu > ul:hover > li > ul > li > a {color: rgba(0,0,0,0.75);} .header .tgmenu > ul > li > ul > li:hover > a{ color:#8c5f46; } .header .tgmenu > ul > li:hover > a {color:#8c5f46; border-color:#8c5f46;} /* fade */ .header .tgmenu > ul > li a, .header .tgmenu > ul > li h2 {transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;-ms-transition:0.3s ease-in-out;-o-transition:0.3s ease-in-out;} .header .tgmenu > ul > li.nonHover a, .header .tgmenu > ul > li.nonHover h2 {opacity:0.3;} /* active */ .header .tgbox.active .tgmenu > ul {visibility:visible; opacity:1; transition:all 0.5s;} .header .toggleBtn { display:none; transition:all 0.5s;} @media all and (max-width:1500px){ .header .etc ul li.head_shop {margin:0 20px 0 0;} } @media all and (max-width:1350px){ } @media all and (max-width:1250px){ .header .etc ul li.toggle_li {display:inline-block; margin:0 0 0 10px;} .header .toggle_li a {position:relative; display:block; width:40px; height:40px; background:#fff;} .header .tgmenu > ul > li {padding:15px;} .header .tgbox.active .tgmenu > ul {padding:0;} .header .tgmenu > ul > li > a {padding:0 0 10px; font-size:20px; } .header .tgmenu > ul > li > ul > li > a {margin:0 0 7px;font-size:16px; } .header .tgbox .mask {display:block;} } @media all and (max-width:768px){ .header .tgbox {width:80%; left:auto;} .header .tgmenu {justify-content: flex-start; padding: 60px 0 0; min-height:450px;} .header .tgmenu > ul { padding:0; min-height:40vw; text-align:left;} .header .tgmenu > ul > li {width:100%; padding:0; margin:3vw 5vw 0; padding:0 2vw 3vw; border-bottom:1px solid #e3d2c8; } .header .tgmenu > ul > li:before {content: ''; display: block; position: absolute;right: 5vw; top: 2.5vw; width: 1.5vw; height: 1.5vw;border-top: 2px solid #333; border-right: 2px solid #333; transform: rotate(135deg);transition: 0.4s; z-index:1;} .header .tgmenu > ul > li.active:before {top:3.5vw; transform: rotate(315deg);} .header .tgmenu > ul > li > h2 {display:block; font-size:5vw; letter-spacing:0; } .header .tgmenu > ul > li.active > h2 {color:#8c5f46; } .header .tgmenu > ul > li.active:before {border-color:#8c5f46;} .header .tgmenu > ul > li > a {display:none;} .header .tgmenu > ul > li > ul {overflow:hidden; padding:0; transition:all 0.3s ease;} .header .tgmenu > ul > li > ul.on {padding:4vw 2vw; height:auto;} .header .tgmenu > ul > li > ul > li {overflow:hidden; margin:0; height:0; text-align:left; transition:all 0.3s ease;} .header .tgmenu > ul > li > ul.on > li {margin:0 0 3vw; height:5.2vw;} .header .tgmenu > ul > li > ul > li:last-child {margin:0;} .header .tgmenu > ul > li > ul > li > a {display:block; margin:0; font-size:4.3vw; } .header .tgbox {background:noneno-repeat 30% bottom #f0ede9;} } /*============================================================================================================ 푸터 ============================================================================================================*/ .footer {position:relative; padding:50px 0 60px; background:#18191c; border-top:1px solid rgba(255,255,255,0.1); } .footer .inner {} .footer .fLogo {} .footer .fInfo{display: flex; justify-content: space-between; flex-wrap:wrap; overflow:hidden; } .footer .fInfo .fInfoBox {width:calc(100% - 200px); } .footer .fInfo .flogo {filter: invert(1); opacity:0.7;} .footer .fInfo .fInfoBox .fGnb {} .footer .fInfo .fInfoBox .fGnb li {position:relative; display:inline-block; padding: 0 30px 5px 0; line-height: 1.6; font-size:16px; color:#aaa; font-weight:500;} .footer .fInfo .fInfoBox .fGnb li span {color:#777; margin: 0 7px 0 0;} .footer .fCopy {margin: 30px 0 0; font-size:15px; opacity:0.4; color:#fff; } .goTop.scroll { display:block; opacity:1; position:fixed; right:20px; bottom:140px; z-index:2;transition:all 0.5s; } .goTop {display:none; opacity:1; transition:all 0.5s; } .goTop a{display:block; width: 50px; height: 50px; padding:10px; border:1px solid #111; color:#fff; background: #111; } .goTop i {position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); font-size:20px; } .goTop a:hover {background:#d0112c; color:#fff; border:1px solid #d0112c;} @media all and (max-width:1200px){ .footer .fList ul li a {margin:0 30px 0 0; font-size:15px; } .footer .fInfo .fInfoBox .fGnb li {font-size:15px; } } @media all and (max-width:1024px){ .footer .fList ul li a {font-size:14px; } .footer .fInfo .fInfoBox .fGnb li {font-size:14px; } .footer .fInfo .fInfoBox .fGnb li {line-height:1.5; } .footer .fCopy {margin:20px 0 0; font-size:14px; } } @media all and (max-width:768px){ .footer {padding:0 0 10vw;} .footer .fList {padding:3vw 0;} .footer .fList ul li a {font-size:3.3vw; margin:0 5vw 0 0;} .footer .fInfo { flex-direction: column-reverse; margin:5vw auto 0; } .footer .fInfo .flogo {width:25vw; margin:0 0 3vw; opacity:1; } .footer .fInfo .fInfoBox {width:100%} .footer .fInfo .fInfoBox .fGnb li {font-size:3.3vw; padding:0 3vw 0 1vw; } .footer .fInfo .fInfoBox .fGnb li span {margin:0 2vw 0 0;} .footer .fCopy { margin:3vw 0 0; font-size:3vw; opacity:0.5; } .goTop.scroll {bottom:25vw; right:3vw;} .goTop a { width:11vw; height:11vw; padding:0; border-radius:50%; background:#fff; color:#111;} .goTop i {font-size:5vw;} .quickBtn {display:none;} .quickBtn.scroll {display:none;} .quickBtn a {position:fixed; right:5vw; bottom:18vw; width:11vw; height:11vw; padding:2.3vw; font-size:3.2vw; border-radius:50%; line-height:1.1; color:#111; background:#f8b62c; font-weight:700;z-index:1;white-space:nowrap; } .quickBtn a span {animation: blink-effect 1s ease-in-out infinite alternate;} } /* 탭 */ .subTabBtn.tabS02 {display:flex; flex-wrap:wrap; } .subTabBtn.tabS02 li {width:50%; } .subTabBtn.tabS01 li a {position: relative; display:flex; justify-content:center; align-items:center; height:55px; font-size:17px; color:#111; font-weight:500; background:#f5f1eb; border:1px solid #e3d2c8;} .subTabBtn.tabS01 li a.on, .subTabBtn.tabS01 li a.active {font-weight:600; color:#fff; background:#8c5f46 !important; border:1px solid #8c5f46; z-index:1;} .subTabBtn.tabS02 li {} .subTabBtn.tabS02 li a {display:inline-block; position:relative; font-size: 20px; font-weight:500; padding: 0 0 12px; transition:all 0.3s;} .subTabBtn.tabS02 li:hover a {color:#8c5f46;} .subTabBtn.tabS02 li a.on, .subTabBtn.tabS02 li a.active {color: #8c5f46; font-weight:600;} /* /////// 탭 개수 /////// */ .subTabBtn.col2 li {width:calc(50% + 1px);} .subTabBtn.col3 li {width:calc(33.333% + 1px);} .subTabBtn.col4 li {width:calc(25% + 1px);} .subTabBtn.col5 li {width:calc(20% + 1px);} .subTabBtn.col6 li {width:calc((100% / 6) + 1px);} .subTabBox {display:none;} .subTabBox.on {display:block;} @media all and (max-width:1200px){ .subTabBtn.tabS01 li a {height:50px; font-size:16px; } } @media all and (max-width:1024px){ .subTabBtn.tabS01 li a {height:45px; font-size:15px;} } @media all and (max-width:768px){ .subTabBtn.tabS01 li a {font-size:3.4vw; height:10vw; } } /* 테이블 */ .main section .tableStyle.mgT {margin:60px 0 0;} .main section .tableStyle table {line-height:1.6; table-layout:fixed; } .main section .tableStyle h2.tit {font-size:30px; margin:0 0 20px; } .main section .tableStyle table th {padding:15px 10px; text-align:center; font-size:20px; font-weight:500; color:#111; background:#cfc9b4; border-bottom:1px solid #f1eddc; border-right:1px solid #f1eddc;} .main section .tableStyle table th:last-child {border-right:none;} .main section .tableStyle table .total th,.main section .tableStyle table .total td {background:#f8b62c; color:#111; font-weight:800;} .main section .tableStyle table thead th {background:#a19c8c; color:#fff;font-weight:700; } .main section .tableStyle table td {padding:15px 20px;font-size:20px; text-align:center; font-weight:400; color:#111; border-bottom:1px solid #f1eddc; border-left:1px solid #f1eddc; background:#fff; } .main section .tableStyle table td .imgArea {display:flex;} .main section .tableStyle table td.subject {text-align:left;} .main section .tableStyle table td:first-child {border-left:none;} .main section .tableStyle table td.line {border-right:1px solid #f1eddc; } .main section .tableStyle table td.color {font-weight:600; color:#111;} .main section .tableStyle table td p {text-indent:-10px; padding:0 0 15px 10px; } .main section .tableStyle table td p:last-child {padding-bottom:0; } @media all and (max-width:1440px) { } @media all and (max-width:1200px) { .main section .tableStyle table td {padding:10px 15px;font-size:15px;} } @media all and (max-width:1024px) { .main section .tableStyle table th {padding:10px; font-size:14px; } .main section .tableStyle table td {padding:10px;font-size:14px;} } @media all and (max-width:768px) { .main section .tableStyle table th {padding:1.5vw 0.5vw; font-size:3.3vw; line-height:1.2} .main section .tableStyle table td {padding:1.5vw 1vw; font-size:3.3vw; line-height:1.2; } .main section .tableStyle table td dl dt:after {width:0.7vw; height:0.7vw; top:2vw; } .main section .tableStyle table td dl dt {padding:0 0 1vw 1.4vw;} .main section .tableStyle table td dl dd {padding:0 0 0 2vw; margin:0 0 0 1vw;} .main section .tableStyle table td dl dt:last-child {padding:0 0 0 1.3vw;} } /*팝업*/ aside.modalPop .popCon {position:relative; overflow:hidden; padding:100px 30px 30px; max-height:650px; overflow:scroll; font-size:15px;} aside.modalPop { position:fixed; top:0; left:0; display: none; width:100vw; height:100vh; background-color:rgba(0,0,0,0.4); z-index:9000;} aside.modalPop .popClose {} aside.modalPop .popWrap { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:block; width:90%; max-width:600px; overflow: auto;background-color: #fff; z-index:9999; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); } aside.modalPop .popWrap .tit {display:flex; justify-content: space-between; align-items: center; position: fixed; width:100%; padding:20px 30px; background:#18191c; z-index:11; } aside.modalPop .popWrap .tit h1 {color:#fff; font-size:20px; font-weight:600;} aside.modalPop .popWrap .tit a i {position:absolute; width:65px; height:65px; right:0; top:0; text-align:center; line-height:65px; font-size:24px; color:#fff; font-weight:600; cursor:pointer; } aside.modalPop .bg {display:block; width:100vw; height:100vh; cursor:pointer;} aside.modalPop .popCon > div {margin:0 0 30px; line-height:1.6;} aside.modalPop .popCon > div h4 {margin:0 0 5px;font-size:15px; font-weight:600;} aside.modalPop .popCon > div p {font-size:15px; color:#333;} aside.modalPop .popCon > div p.dot {margin:5px 0 0; padding:0 0 0 10px; text-indent:-7px;} aside.modalPop .popCon > div p b {font-weight:600; } @media all and (max-width:1400px){ } @media all and (max-width:1024px){ } @media all and (max-width:768px){ aside.modalPop .popWrap {max-width:500px; } aside.modalPop .popWrap .tit h1 {font-size:3.5vw;} aside.modalPop .popWrap .tit {padding:3.5vw 5vw; } aside.modalPop .popWrap .popCon {} aside.modalPop .popWrap .tit a i {position:absolute; width:12vw; height:12vw; right:0; top:0; text-align:center; line-height:12vw; font-size:5vw;} aside.modalPop .popCon { height: 80vw; padding: 17vw 5vw 0; font-size: 3vw;} aside.modalPop .popCon > div {margin:0 0 5vw; line-height:1.5;} aside.modalPop .popCon > div h4 {margin:0 0 1.5vw; font-size:3.3vw;} aside.modalPop .popCon > div p {font-size:3vw;} aside.modalPop .popCon > div p.dot {padding: 0 0 0 1.8vw;text-indent: -1.5vw;} } @media all and (max-width:500px){ } /* main.css */ /*============================================================================================================ 공통 ============================================================================================================*/ .main {position: relative; z-index:1; } .main section {overflow:hidden;position: relative;} .main section .titBox {} .main section .titBox figure {} /* parallax__cont */ #parallax__cont {} .parallax__item {position: relative;width: 100%; text-align:center; } .main section .swiper_arr{display:flex;} .main section .swiper_arr > div i{padding:15px; font-size:18px; color:#fff; } .main section .swiper_arr .swiper-button-prev, .main section .swiper_arr .swiper-button-next {width:50px;height:50px; background:rgba(0,0,0,0.8); box-shadow:0px 5px 10px 0px rgb(0 13 56 / 10%); z-index:11;} .main section .swiper_arr .swiper-button-prev {left:30px;} .main section .swiper_arr .swiper-button-next {right:30px;} .main section .swiper-button-prev:after,.main section .swiper-button-next:after {display:none;} .main section .swiper_arr .swiper-button-prev:hover, .main section .swiper_arr .swiper-button-next:hover { background:rgba(0,0,0,1);} @media all and (max-width:1400px){ } @media all and (max-width:1200px){ .main section .titBox figure {width:80%; max-width:600px; margin:auto; } .main section .titBox2 figure {width:80%; max-width:750px; margin:auto; } } @media all and (max-width:1024px){ .main section .titBox figure {width:100%;} .main section .titBox2 figure {width:100%; } } @media all and (max-width:768px){ .main section .swiper_arr .swiper-button-prev, .main section .swiper_arr .swiper-button-next {width:35px; height:35px;} .main section .swiper_arr .swiper-button-prev{left:15px;} .main section .swiper_arr .swiper-button-next {right:15px} .main section .swiper_arr > div i {padding:10px; font-size:13px;} } @media all and (max-width:500px){ } /*============================================================================================================ SECTION01 ============================================================================================================*/ /* section01 */ .section01 {position:relative; width:100%; height:100vh; min-height:750px;} .section01 .swiper-container {height:100%;} .section01 .swiper-slide {position:relative; overflow:hidden;} .section01 .swiper-slide .bg {position:absolute; height:100%; top:0; left:0; right:0; transform:scale(1.1); transition:all 5s ease-in-out; z-index:-1;} .section01 .swiper-slide .bg01 {background:url('/common/img/main/mainvisual.webp') no-repeat center / cover;} .section01 .swiper-slide .bg02 {background:url('/common/img/main/mainvisual_1.webp') no-repeat center / cover;} /* 추가: PC/모바일 공통 오버레이 */ .section01 .swiper-slide .bg .mask { position:absolute; inset:0; background:rgba(0, 0, 0, 0.45); } .section01 .swiper-slide .txtBox { position:absolute; max-width:1440px; width:100%; height:auto; margin:0 auto; padding:0 20px; top:calc(50% - 40px); left:50%; text-align:left; transform:translate(-50%, -50%); vertical-align:middle; transition:all 1s ease-in-out; z-index:2; } .section01 .swiper-slide .txtBox h2 {opacity:1; transition:all 1.5s ease;} .section01 .swiper-slide .txtBox h1 {margin:22px 0 0; opacity:1; transition:all 1.5s ease;} .section01 .swiper-slide .txtBox .main-subtitle { font-size:28px; font-weight:700; color:#fff; letter-spacing:-0.5px; text-shadow:0 3px 14px rgba(0,0,0,0.35); } .section01 .swiper-slide .txtBox .main-title { font-size:96px; font-weight:800; color:#ffcc33; line-height:1; letter-spacing:-3px; text-transform:uppercase; text-shadow:0 4px 18px rgba(0,0,0,0.28); } .section01 .swiper-slide .txtBox .main-desc { margin:24px 0 0; max-width:780px; font-size:20px; color:#fff; line-height:1.6; word-break:keep-all; text-shadow:0 3px 14px rgba(0,0,0,0.35); } .section01 .swiper-slide.swiper-slide-active .bg { transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); } /* 모션 */ .section01 .swiper-slide-active .txtBox h2 { animation-name:bounceInUp; animation-duration:1s; animation-fill-mode:both; animation-delay:0.25s; } .section01 .swiper-slide-active .txtBox h1 { animation-name:bounceInUp; animation-duration:1s; animation-fill-mode:both; animation-delay:0.5s; } @keyframes bounceInUp { 0% { opacity:0; transform:translateY(100px); } 60% { transform:translateY(-30px); } 80% { transform:translateY(10px); } 100% { opacity:1; transform:translateY(0); } } @media all and (max-width:1440px){ .section01 {padding:0;} .section01 .swiper-slide .txtBox {text-align:center;} .section01 .swiper-pagination {padding:0;} } @media all and (max-width:1200px){ .section01 {min-height:800px;} .section01 .swiper-slide .txtBox {width:70%; max-width:900px;} .section01 .swiper-slide .txtBox .main-title {font-size:78px;} .section01 .swiper-slide .txtBox .main-desc {font-size:18px;} } @media all and (max-width:1024px){ .section01 {} } @media all and (max-width:768px){ .section01 {height:90vh; min-height:460px;} .section01 .swiper-slide .txtBox { padding:0 20px; top:calc(50% - 140px); width:88%; max-width:100%; } .section01 .swiper-slide .txtBox h1 {margin:2vw 0 0;} .section01 .swiper-slide .txtBox .main-subtitle {font-size:4.2vw;} .section01 .swiper-slide .txtBox .main-title {font-size:12vw; letter-spacing:-0.25vw;} .section01 .swiper-slide .txtBox .main-desc {margin:3vw auto 0; font-size:3.5vw; max-width:90%;} .section01 .swiper-pagination span.swiper-pagination-bullet {width:15vw; margin:0 1.5vw;} .section01 .swiper-slide .bg01 {background:url('/common/img/main/mainvisual.webp') no-repeat 57% / cover;} .section01 .swiper-slide .bg02 {background:url('/common/img/main/mainvisual_1.webp') no-repeat 57% / cover;} .section01 .swiper-slide .bg .mask {background:rgba(0, 0, 0, 0.38);} .main .section01 .swiper_arr .swiper-button-prev, .main .section01 .swiper_arr .swiper-button-next {width:30px; height:30px;} } @media all and (max-width:500px){ } /*============================================================================================================ SECTION02 브랜드 스토리 ============================================================================================================*/ .section02 {padding:180px 0 0; background:url('/common/img/main/sec02bg02.webp')no-repeat center / cover;} .section02 .txtBox {margin:60px 0;} .section02 .txtBox p {font-size:18px; color:#fff; margin:25px 0; letter-spacing:-0.5px; line-height:1.6;} .section02 .txtBox p span {color:#f8b62c; font-weight:700;} .section02 .imgBox {position:relative; } .section02 .imgBox .moveAni { display:block; opacity:1; position:absolute; left:50%; bottom:25%;margin:0 0 0 -250px; z-index:1; border-radius:50%; transition:all 0.5s; } .section02 .imgBox .moveAni figure {display: flex;align-items: center; justify-content: center;position: absolute; left:50%; top:50%;width: 200px;height: 200px; background: #000; border-radius: 50%; border: 5px solid #e8ab29; transform:translate(-50%,-50%);font-size:30px; color:#957057; } .section02 .imgBox .moveAni .bg {animation: deg360 20s linear 0s infinite; -webkit-animation: deg360 20s linear 0s infinite; } @keyframes deg360 { 0% {transform:rotate(0); -webkit-transform:rotate(0); -moz-transform:rotate(0); -ms-transform:rotate(0); -o-transform:rotate(0);} 100% {transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg);} } @media all and (max-width:1440px){ } @media all and (max-width:1200px){ .section02 {padding:140px 0 0; } .section02 .txtBox {margin:40px 0; } .section02 .txtBox p {font-size:17px; margin:20px 0;} } @media all and (max-width:1024px){ .section02 {padding:120px 0 0; } } @media all and (max-width:768px){ .section02 {padding:23vw 0 0; background:url('/common/img/main/sec02bg02.webp')no-repeat right / cover; } .section02 .txtBox {margin:7vw 0;} .section02 .txtBox p {font-size:3.5vw; margin:5vw 0;} .section02 .imgBox .moveAni {margin:0 0 0 -40vw; } .section02 .imgBox .moveAni .bg{width:40vw;} .section02 .imgBox .moveAni figure {width:30vw; height:30vw; max-width:190px; max-height:190px; padding:5vw; border:3px solid #e8ab29; } } @media all and (max-width:500px){ } /* 공통 텍스트 타이틀 */ .textTit p { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: #d0112c; letter-spacing: 2px; } .textTit h2 { font-size: 48px; font-weight: 800; color: #111; letter-spacing: -1px; } @media all and (max-width:768px){ .textTit p { margin: 0 0 2vw; font-size: 3vw; letter-spacing: 1px; } .textTit h2 { font-size: 7vw; } } /*============================================================================================================ SECTION03 브랜드 강점 ============================================================================================================*/ /* 강점 */ .section03 .article31 {position:relative; padding:140px 0 220px; background:url('/common/img/main/sec03bg02.webp')no-repeat center / cover;} .section03 .article31 .conBox {margin:80px 0 0;} .section03 .article31 .conBox ul {display:flex; flex-wrap:wrap; margin:-15px;} .section03 .article31 .conBox ul li {position:relative; width:calc(100% / 3 - 30px); margin:15px; } .section03 .article31 .conBox ul li figure{position:relative;overflow:hidden; z-index:0;} .section03 .article31 .conBox ul li figure img {transform: scale(1); transition:all 0.5s ease-out; width:100%;} .section03 .article31 .conBox ul li:hover figure img {transform: scale(1.15); } .section03 .article31 .conBox ul li .txtBox {position:absolute; top:0; left:0; padding:30px 0 0 30px; text-align:left; color:#fff; } .section03 .article31 .conBox ul li .txtBox span {display: block;width: 90px; height: 26px;font-size:16px;background: #e32c21; text-align: center;line-height: 29px; border-radius: 30px; } .section03 .article31 .conBox ul li .txtBox h2 {margin: 20px 0 10px;font-size: 24px; font-weight: 700;line-height: 1.35; letter-spacing:-0.5px; } .section03 .article31 .conBox ul li .txtBox h2 em {font-style: italic; font-weight: 600;} .section03 .article31 .conBox ul li .txtBox p {font-size:18px;} .section03 .article31 .txtLineBox {position:absolute; bottom:0; left:0; width:100%; height:50px; background:#d0112c; } .section03 .article31 .txtLineBox .txtLine {position: absolute;display: inline-block;overflow: hidden;left: 0; white-space: nowrap;animation: mrqueev1 60s linear infinite; line-height:50px; } .section03 .article31 .txtLineBox .txtLine.t2 { animation-delay: -30s;} .section03 .article31 .txtLineBox .txtLine span { display: inline-block; box-sizing: border-box; margin-right:45px;} @keyframes mrqueev1 { 0% { transform: translateX(100%) } to { transform: translateX(-100%) } } @media all and (max-width:1440px){ .section03 .article31 {padding:120px 0 180px;} } @media all and (max-width:1200px){ .section03 .article31 {padding:100px 0 160px;} .section03 .article31 .conBox {margin:60px 0 0; } .section03 .article31 .conBox ul li {width:calc(100% / 2 - 30px);} .section03 .article31 .conBox ul li .txtBox p {font-size:17px;} } @media all and (max-width:1024px){ .section03 .article31 .conBox {margin:40px 0 0;} .section03 .article31 .conBox ul li .txtBox h2 {font-size:22px; } .section03 .article31 .conBox ul li .txtBox p {} } @media all and (max-width:768px){ .section03 .article31 {padding:16vw 0 23vw;} .section03 .article31 .conBox {margin:7vw auto 0; max-width:650px;} .section03 .article31 .conBox ul {margin:0; } .section03 .article31 .conBox ul li {width:100%; margin:0 0 3vw; } .section03 .article31 .conBox ul li:last-child {margin-bottom:0; } .section03 .article31 .conBox ul li .txtBox {padding:5vw 0 0 5vw; } .section03 .article31 .conBox ul li .txtBox span {width:17vw; height:6vw; line-height:7vw; font-size:3.4vw; } .section03 .article31 .conBox ul li .txtBox h2 {font-size:4.3vw; margin:3vw 0 1.5vw; } .section03 .article31 .conBox ul li .txtBox p {font-size:3.4vw; } .section03 .article31 .txtLineBox {height:5vw;} .section03 .article31 .txtLineBox .txtLine {animation: mrqueev1 30s linear infinite; line-height:5vw; } .section03 .article31 .txtLineBox .txtLine.t2 { animation-delay: -15s;} .section03 .article31 .txtLineBox .txtLine span {margin-right:7vw;} } @media all and (max-width:500px){ } /*============================================================================================================ SECTION04 창업 경쟁력 ============================================================================================================*/ .section03 .article32 {position:relative; padding:140px 0 160px; background:url('/common/img/main/sec04bg03.webp')no-repeat center / cover;} .section03 .article32 .item01 {position:absolute; left:-3%; top:200px; } .section03 .article32 .item02 {position:absolute; right:0; bottom:50px; } .section03 .article32 .conBox {position:relative; padding:100px 0; margin:15px 0 50px; } .section03 .article32 .conBox:before {content:''; position:absolute; width:1px; height:100%; background:#111; left:50%; top:0;} .section03 .article32 .conBox ul li .txtBox {position:absolute; top:0; left:0; padding:40px 0 0 40px; text-align:left; color:#fff; } .section03 .article32 .conBox ul li .txtBox span {font-size:18px; color:#d0112c; font-weight:800;} .section03 .article32 .conBox ul li .txtBox p {margin:5px 0 3px; font-size:18px; } .section03 .article32 .conBox ul li .txtBox h2 {font-weight:800; font-size:36px;} .section03 .article32 .conBox ul li .txtBox h2 em {font-style: italic; font-weight: 800;} .section03 .article32 .conBox ul li {position:relative; overflow: hidden;} .section03 .article32 .conBox ul li figure img {transform: scale(1); transition:all 0.5s ease-out; width:100%;} .section03 .article32 .conBox ul li:hover figure img {transform: scale(1.15); } .section03 .article32 .swiper_arr .swiper-button-prev {left:0;} .section03 .article32 .swiper_arr .swiper-button-next {right:0;} .section03 .article32 .imgBox span {} .section03 .article32 .imgBox figure {display:inline-block; position:relative; } .section03 .article32 .imgBox span{content:''; position:absolute; width:77px; height:53px; top:-50px; right:-23px; background:url('/common/img/main/sec04img06.webp')no-repeat; } @media all and (max-width:1440px){ .section03 .article32 {padding:120px 0 140px; } .section03 .article32 .conBox {padding:70px 0; } } @media all and (max-width:1200px){ .section03 .article32 {padding: 100px 0 140px;} .section03 .article32 .conBox {padding:60px 0; } .section03 .article32 .conBox ul li .txtBox {padding:30px 0 0 30px;} .section03 .article32 .conBox ul li .txtBox p {font-size:17px; } .section03 .article32 .conBox ul li .txtBox h2 {font-size:30px; } .section03 .article32 .conBox ul li .txtBox span {font-size:17px; } } @media all and (max-width:1024px){ .section03 .article32 .item01 {left:-10%; top:150px;} .section03 .article32 .item01 img {width:80%} .section03 .article32 .conBox {padding:50px 0; } .section03 .article32 .conBox ul li .txtBox h2 {font-size:26px; } .section03 .article32 .conBox ul li .txtBox span {font-size:16px; } .section03 .article32 .imgBox figure {max-width:500px; margin:auto;} .section03 .article32 .item02 {right:-30%; } .section03 .article32 .item02 figure {width:80%} } @media all and (max-width:768px){ .section03 .article32 {padding:23vw 0;} .section03 .article32 .conBox {padding:7vw 0; margin:3vw 0 7vw;} .section03 .article32 .item01 {left:-30%; top:100px; } .section03 .article32 .item01 img {width:60%; } .section03 .article32 .item02 {bottom:0; right:-25%; opacity:0.75; } .section03 .article32 .item02 img {width:70vw; } .section03 .article32 .item02 figure {width:100%; } .section03 .article32 .imgBox figure {width:80%; } .section03 .article32 .imgBox span {width:34px; height:30px; background-size:cover; top:-27px; right:-9px;} .section03 .article32 .conBox ul li .txtBox {padding:5vw 0 0 5vw; } .section03 .article32 .conBox ul li .txtBox span {font-size:3.4vw; } .section03 .article32 .conBox ul li .txtBox p {font-size:3.4vw; margin:0.5vw 0; } .section03 .article32 .conBox ul li .txtBox h2 {font-size:6vw; } } @media all and (max-width:500px){ } /* 인테리어 */ .section03 .article33 {position:relative; padding:140px 0; background:url('/common/img/main/sec05bg01.webp')no-repeat top / cover;} .section03 .article33 .conBox {margin:80px 0 0;} .section03 .article33 .conBox ul li figure img {border:1px solid #d0112c} .section03 .article33 .swiper_arr .swiper-button-prev {left:25.4%;} .section03 .article33 .swiper_arr .swiper-button-next {right:25.4%;} /* 수익률 */ .section03 .article34 {position:relative; padding:140px 0; background:url('/common/img/main/sec06bg01.webp?v=eggp1')no-repeat top / cover;} .section03 .article34 .conBox {display:flex; justify-content: space-between; flex-wrap:wrap; margin:80px 0 0;} .section03 .article34 .conBox .leftBox {width:50%; } .section03 .article34 .conBox .leftBox p {margin:30px 0 0; font-size:15px; text-align:left; line-height:1.4; color:rgba(0,0,0,0.7); font-weight:600; } .section03 .article34 .conBox .leftBox figure {position:relative; } .section03 .article34 .conBox .leftBox .mask {position:absolute; top:0; left:0; width:100%; height:100%; animation:blink-effect 1s ease-in-out infinite alternate;} @keyframes blink-effect { 0% {opacity:0;} 100% {opacity:1;} } @keyframes price_eff{ 0%{transform: translateY(-50%) scale(1);} 50%{transform: translateY(-50%) scale(2);} 100%{transform: translateY(-50%) scale(1);} } @media all and (max-width:1440px){ .section03 .article33 {padding:120px 0; } .section03 .article33 .conBox {margin:70px 0 0; } .section03 .article33 .swiper_arr .swiper-button-prev {left:20px;} .section03 .article33 .swiper_arr .swiper-button-next {right:20px;} .section03 .article34 {padding:120px 0; } .section03 .article34 .conBox .leftBox {width:47.5%; } .section03 .article34 .conBox .rightBox {width:47.5%; } .section03 .article34 .conBox .leftBox p {font-size:14px; } } @media all and (max-width:1200px){ .section03 .article33 {padding:100px 0; } .section03 .article33 .conBox {margin:60px 0 0; } .section03 .article34 {padding:100px 0; } .section03 .article34 .conBox .leftBox p {margin:20px 0 0; font-size:13px; } .section03 .article34 .conBox {margin:60px 0 0;} } @media all and (max-width:1024px){ .section03 .article33 .conBox {margin:50px 0 0; } .section03 .article34 .conBox {margin:50px 0 0; } .section03 .article34 .conBox .leftBox {width:100%; } .section03 .article34 .conBox .rightBox {width:100%; margin:50px 0 0; } .section03 .article34 .conBox .leftBox p {margin:10px 0 0; text-align:center; } } @media all and (max-width:768px){ .section03 .article33 {padding:23vw 0; } .section03 .article33 .conBox {margin:7vw 0 0;} .section03 .article33 .swiper_arr .swiper-button-prev {left:15px;} .section03 .article33 .swiper_arr .swiper-button-next {right:15px;} .section03 .article34 {padding:23vw 0; } .section03 .article34 .conBox {margin:7vw 0 0;} .section03 .article34 .conBox .rightBox {margin:7vw 0 0;} .section03 .article34 .conBox .leftBox p {margin:3vw 0 0; font-size:3.2vw; color:#777;} } @media all and (max-width:500px){ } .section03 .article33 .swiper-container { overflow: hidden; } .section03 .article33 .conBox ul li { position: relative; overflow: hidden; } .section03 .article33 .conBox ul li .txtBox { position: absolute; left: 0; bottom: 0; width: 100%; padding: 34px 36px; text-align: left; color: #fff; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 100%); } .section03 .article33 .conBox ul li .txtBox span { display: inline-block; margin: 0 0 12px; font-size: 16px; font-weight: 700; color: #f8b62c; } .section03 .article33 .conBox ul li .txtBox h2 { font-size: 28px; font-weight: 800; line-height: 1.25; } .section03 .article33 .conBox ul li .txtBox p { margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.92); } .section03 .article34 .conBox .rightBox { width: 45%; display: flex; align-items: stretch; } .section03 .article34 .conBox .rightBox .priceCard { width: 100%; padding: 40px; background: #fff; border: 1px solid rgba(208,17,44,0.18); box-shadow: 0 15px 40px rgba(0,0,0,0.08); } .section03 .article34 .conBox .rightBox .priceCard ul li { padding: 0 0 22px; margin: 0 0 22px; border-bottom: 1px solid rgba(0,0,0,0.08); text-align: left; } .section03 .article34 .conBox .rightBox .priceCard ul li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .section03 .article34 .conBox .rightBox .priceCard ul li strong { display: block; font-size: 24px; font-weight: 800; color: #111; } .section03 .article34 .conBox .rightBox .priceCard ul li span { display: block; margin: 10px 0 0; font-size: 17px; line-height: 1.6; color: #666; } @media all and (max-width:1200px){ .section03 .article33 .conBox ul li .txtBox { padding: 28px 30px; } .section03 .article33 .conBox ul li .txtBox h2 { font-size: 24px; } .section03 .article33 .conBox ul li .txtBox p { font-size: 16px; } .section03 .article34 .conBox .rightBox .priceCard { padding: 32px; } .section03 .article34 .conBox .rightBox .priceCard ul li strong { font-size: 22px; } .section03 .article34 .conBox .rightBox .priceCard ul li span { font-size: 16px; } } @media all and (max-width:1024px){ .section03 .article34 .conBox .rightBox .priceCard { margin: 0 auto; } } @media all and (max-width:768px){ .section03 .article33 .conBox ul li .txtBox { padding: 5vw; } .section03 .article33 .conBox ul li .txtBox span { margin: 0 0 1.5vw; font-size: 3vw; } .section03 .article33 .conBox ul li .txtBox h2 { font-size: 5vw; } .section03 .article33 .conBox ul li .txtBox p { margin: 2vw 0 0; font-size: 3.3vw; } .section03 .article34 .conBox .rightBox .priceCard { padding: 5vw; } .section03 .article34 .conBox .rightBox .priceCard ul li { padding: 0 0 4vw; margin: 0 0 4vw; } .section03 .article34 .conBox .rightBox .priceCard ul li strong { font-size: 4.4vw; } .section03 .article34 .conBox .rightBox .priceCard ul li span { margin: 1.5vw 0 0; font-size: 3.3vw; } } /*============================================================================================================ SECTION05 대표메뉴 ============================================================================================================*/ .section04 {padding:140px 0; background:url('/common/img/main/sec05bg01.webp')no-repeat bottom center / cover;} .section04 .item01 {position:absolute; left:50%; top:15%; margin:0 0 0 250px; } .section04 .conBox {margin:80px 0 0;} .section04 .conBox .swiper_arr .swiper-button-next {right:13%; } .section04 .conBox .swiper_arr .swiper-button-prev {left:13%; } @media all and (max-width:1440px){ .section04 {padding:120px 0; } .section04 .conBox {margin:70px 0 0; } .section04 .conBox .swiper_arr .swiper-button-prev {left:20px;} .section04 .conBox .swiper_arr .swiper-button-next {right:20px;} } @media all and (max-width:1200px){ .section04 {padding:100px 0; } .section04 .conBox {margin:60px 0 0; } } @media all and (max-width:1024px){ .section04 .conBox {margin:50px 0 0; } .section04 .conBox ul li figure.only_pc {display:none;} .section04 .conBox ul li figure.only_m {display:block;} } @media all and (max-width:768px){ .section04 {padding:23vw 0; } .section04 .conBox {margin:7vw 0 0;} .section04 .conBox .swiper_arr .swiper-button-prev {left:15px;} .section04 .conBox .swiper_arr .swiper-button-next {right:15px;} } @media all and (max-width:500px){ } /*============================================================================================================ SECTION06 창업안내 ============================================================================================================*/ .section05 {background:#f1eddc;} .section05 .article51 {padding:140px 0; background:url('/common/img/main/sec08bg01.webp')no-repeat top center / cover;} .section05 .article51 .conBox {margin:80px 0 0;} .section05 .article51 .conBox ul {display:flex; flex-wrap:wrap; margin:-15px; } .section05 .article51 .conBox ul li {position:relative; width: calc(100% / 4 - 30px); margin:15px; text-align:left; background:#fff; } .section05 .article51 .conBox ul li .txtBox{padding:30px 30px 50px;} .section05 .article51 .conBox ul li .txtBox span {display:inline-block; width:95px; height:25px; line-height:27px; background:#e32c21; border-radius:30px; font-size:16px; color:#fff; text-align:center; } .section05 .article51 .conBox ul li .txtBox h2 {margin:12px 0 10px; font-size:24px; font-weight:700; } .section05 .article51 .conBox ul li .txtBox .txt{} .section05 .article51 .conBox ul li .txtBox .txt p{position:relative; color:#666; margin:0 0 7px; padding:0 0 0 10px; font-size:18px; line-height:1.35;} .section05 .article51 .conBox ul li .txtBox .txt p:after {content:'-'; position:absolute; top:0; left:0; } .section05 .article51 .conBox ul li .txtBox .txt p:last-child{margin-bottom:0; } @media all and (max-width:1440px){ .section05 .article51 {padding:120px 0; } .section05 .article51 .conBox {margin:70px 0 0; } .section05 .article51 .conBox .swiper_arr .swiper-button-prev {left:20px;} .section05 .article51 .conBox .swiper_arr .swiper-button-next {right:20px;} .section05 .article51 .conBox ul {margin:-10px;} .section05 .article51 .conBox ul li {width: calc(100% / 3 - 20px); margin:10px} } @media all and (max-width:1200px){ .section05 .article51 {padding:100px 0; } .section05 .article51 .conBox {margin:60px 0 0; } .section03 .article51 .conBox ul li .txtBox h2 {font-size:22px; } .section05 .article51 .conBox ul li .txtBox .txt p {font-size:17px; } .section05 .article51 .conBox ul li .txtBox span {width:88px; font-size:15px; } } @media all and (max-width:1024px){ .section05 .article51 .conBox {margin:50px 0 0; } .section05 .article51 .conBox ul li {width: calc(100% / 2 - 30px);} .section05 .article51 .conBox ul li .txtBox .txt p {font-size:16px; } .section05 .article51 .conBox ul li .txtBox span {width:80px; font-size:14px; } } @media all and (max-width:768px){ .section05 .article51 {padding:23vw 0; background:url('/common/img/main/sec08bg01.webp')no-repeat top center/ contain #000;} .section05 .article51 .conBox {margin:7vw auto 0; max-width:650px;} .section03 .article51 .conBox ul li .txtBox h2 {font-size:4.3vw; } .section05 .article51 .conBox ul {margin:0; } .section05 .article51 .conBox ul li {width: 100%; margin:0 0 3vw; } .section05 .article51 .conBox ul li:last-child {margin:0; } .section05 .article51 .conBox ul li .txtBox {padding:5vw 5vw 7vw; } .section05 .article51 .conBox ul li .txtBox span {width:18vw; height:6vw; line-height:7vw; font-size:3.2vw; } .section05 .article51 .conBox ul li .txtBox h2 {margin:2vw 0; font-size:5vw; } .section05 .article51 .conBox ul li .txtBox .txt p {font-size:3.4vw; margin:0 0 1vw; } } @media all and (max-width:500px){ } /*배너 */ .section05 .article52 { margin:80px auto 0; max-width:1800px; } .section05 .article52 .imgBox{position:relative; } .section05 .article52 .imgBox .mask {position:relative; display:block; padding:180px 0; background:url('/common/img/main/sec09bg011.webp')no-repeat center fixed; background-size:cover; transition: all 1s ease; filter: grayscale(1);} .section05 .article52 .imgBox .mask:after {content:'';position: absolute;width: 100%; height: 100%;top: 0;left: 0; background: rgba(0, 0, 0, 0.3);} .section05 .article52 .imgBox > figure {display: flex; align-items: center; justify-content: center;position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; } .section05 .article52 .imgBox .mask.go { filter: grayscale(0); transition: all 0.5s; } @media all and (max-width:1440px){ .section05 .article52 {margin:50px auto 0; padding:0 50px; } .section05 .article52 .imgBox .mask {padding:140px 0; } .section05 .article52 .imgBox > figure img {width:80%; max-width:750px; margin:auto; } } @media all and (max-width:1200px){ .section05 .article52 {margin:30px auto 0; padding:0 30px; } .section05 .article52 .imgBox .mask {padding:130px 0; } } @media all and (max-width:1024px){ .section05 .article52 .imgBox .mask {padding:120px 0; background:url('/common/img/main/sec09bg011.webp')no-repeat center / cover; } } @media all and (max-width:768px){ .section05 .article52 {margin:0; padding:0; } .section05 .article52 .imgBox .mask {padding:18vw 0; } .section05 .article52 .imgBox > figure img {width:90%;} .section05 .article52 .imgBox .mask {} } @media all and (max-width:500px){ } /*가맹비용*/ .section05 .article53 {padding:140px 0;} .section05 .article53 .conBox {position:relative; overflow:hidden; padding:40px 20px; margin:60px 0 0; min-height:400px; background:#fff;} .section05 .article53 .conBox h4 {margin: 0 0 15px; font-weight: 500; text-align: right; font-size:15px; } .section05 .article53 .conBox .txtBox {margin:15px 0 0; text-align:left; } .section05 .article53 .conBox .txtBox p {margin:0 0 5px;font-weight: 500; font-size:15px; color:rgba(0,0,0,0.7);} .section05 .article53 .conBox .txtBox p:last-child {margin-bottom:0; } .section05 .article53 .conBox .total span {animation:blink-effect 1s ease-in-out infinite alternate} .section05 .article53 .conBox:after {content:''; position:absolute; width:100%; height:100%; top:0; left:0; backdrop-filter:blur(8px); -webkit-backdrop-filter: blur(8px);} .section05 .article53 .conBox .newCon {position:absolute; display: flex;align-items: center; justify-content: center; width:100%; height:100%; top: 0; left: 0; z-index: 2;} .section05 .article53 .conBox .newCon figure img {} .section05 .article53 .conBox .bg-content-blur { filter: blur(8px); opacity: 0.4; pointer-events: none; user-select: none; } .section05 .article53 .conBox .newCon-center { position: absolute; top: 0; left: 0; z-index: 10; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .section05 .article53 .conBox .newCon-center figure { width: 100%; max-width: 500px; margin: 0; text-align: center; } .section05 .article53 .conBox .newCon-center img { width: 90%; height: auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,0.2)); transition: transform 0.3s ease; } .section05 .article53 .conBox .newCon-center img:hover { transform: scale(1.05); } @media all and (max-width:1440px){ .section05 .article53 {padding:120px 0; } .section05 .article53 .conBox {margin:60px 0 0; } } @media all and (max-width:1200px){ .section05 .article53 {padding:100px 0; } .section05 .article53 .conBox {margin:50px 0 0; } .section05 .article53 .conBox h4 {font-size:14px; } .section05 .article53 .conBox .txtBox p {font-size:14px; } } @media all and (max-width:1024px){ .section05 .article53 .conBox {margin:40px 0 0; } .section05 .article53 .conBox h4 {font-size:13px; } .section05 .article53 .conBox .txtBox p {font-size:13px; } } @media all and (max-width:768px){ .section05 .article53 {padding:23vw 0; } .section05 .article53 .conBox {margin:7vw 0 0; padding:20px 10px; min-height:500px;} .section05 .article53 .conBox h4 {margin:0 0 3vw; font-size:3.2vw; } .section05 .article53 .conBox .txtBox p {margin:0 0 2vw; font-size:3.2vw;} .section05 .article53 .conBox .newCon-center figure {max-width:80%;} .section05 .article53 .conBox .newCon-center img {width:90%;} } @media all and (max-width:500px){ } /*============================================================================================================ SECTION06 매장안내 ============================================================================================================*/ .section06 {padding:140px 0; background:url('/common/img/main/sec11bg01.webp')no-repeat bottom center / cover;} .section06 .conBox {position:relative; margin:80px 0 0; box-shadow:0px 10px 15px 0px rgba(0,0,0,0.1); background:#fff;} .section06 .conBox .moveAni { display:block; opacity:1; position:absolute;top:-18%; right:-5%; z-index:11; border-radius:50%; transition:all 0.5s; } .section06 .conBox .moveAni figure {display: flex;align-items: center; justify-content: center;position: absolute; left:50%; top:50%;width: 200px;height: 200px; border-radius: 50%; transform:translate(-50%,-50%);} .section06 .conBox .moveAni .bg {animation: deg360 20s linear 0s infinite; -webkit-animation: deg360 20s linear 0s infinite; } .section06 .conBox ul > li {display:flex; background:#fff; } .section06 .conBox .infoBox {padding: 60px; width:calc(100% - 50%); text-align: left;} .section06 .conBox .infoBox h2 {margin:0 0 20px; font-size:30px; } .section06 .conBox .infoBox h2 img {display:none; } .section06 .conBox .infoBox .infoList {} .section06 .conBox .infoBox .infoList li {display: flex; align-items: center; margin:0 0 12px;} .section06 .conBox .infoBox .infoList li:last-child {margin-bottom:0; } .section06 .conBox .infoBox .infoList li i {margin:0 10px 0 0; width:14px; } .section06 .conBox .infoBox .infoList li h4 {font-size:18px; font-weight:500; } .section06 .conBox .infoBox .btnWrap {position:absolute; bottom:80px; } .section06 .conBox .infoBox .btnWrap a {display:inline-block; width:200px; height:60px; line-height:60px; box-sizing:border-box; text-align:center; font-weight:700; border:2px solid #d0112c; font-size:18px; } .section06 .conBox .infoBox .btnWrap a.btn1 {margin:0 10px 0 0; background:#d0112c; color:#fff; } .section06 .conBox .infoBox .btnWrap a.btn2 {background:#fff; color:#d0112c;} .section06 .conBox ul > li > figure { width: 50%; } .section06 .conBox ul > li > figure img { width: 100%; height: 100%; object-fit: cover; } .section06 .conBox .moveAni .bg img { width: 220px; } @media all and (max-width:1200px){ .section06 .conBox ul > li > figure { width: 40%; } } @media all and (max-width:1024px){ .section06 .conBox ul > li > figure { width: 100%; } .section06 .conBox .moveAni { display: none; } } @media all and (max-width:1440px){ .section06 {padding:120px 0; } .section06 .conBox {margin:60px 0 0; } .section06 .conBox .infoBox h2 {font-size:26px;} } @media all and (max-width:1200px){ .section06 {padding:100px 0; } .section06 .conBox {margin:50px 0 0; } .section06 .conBox h4 {font-size:14px; } .section06 .conBox .infoBox {width:calc(100% - 40%);} .section06 .conBox .infoBox {padding:40px; } .section06 .conBox .infoBox .btnWrap {position:relative; bottom:0; margin:30px 0 0;} .section06 .conBox .infoBox h2 {font-size:22px;} .section06 .conBox .infoBox .infoList li h4 {font-size:17px; } .section06 .conBox .moveAni { zoom:0.7;} .section06 .conBox .infoBox .btnWrap a {width:180px; height:50px; line-height:50px; font-size:17px; } .section06 .conBox .swiper_arr .swiper-button-next{right:0;} .section06 .conBox .swiper_arr .swiper-button-prev{left:0;} } @media all and (max-width:1024px){ .section06 .conBox {margin:40px auto 0; } .section06 .conBox h4 {font-size:13px; } .section06 .conBox ul > li {flex-wrap:wrap; } .section06 .conBox .infoBox {width:100%; padding:30px; } .section06 .conBox .infoBox h2 {font-size:20px; margin:0 0 15px; } .section06 .conBox .infoBox .infoList li h4 {font-size:16px; } .section06 .conBox .infoBox .infoList li i {margin:0 7px 0 0;} .section06 .conBox .infoBox .btnWrap {margin:20px 0 0; } .section06 .conBox .infoBox .btnWrap a {font-size:16px; } .section06 .conBox .infoBox .infoList li {margin:0 0 7px} } @media all and (max-width:768px){ .section06 {padding:23vw 0; } .section06 .conBox {margin:7vw 0 0;} .section06 .conBox .infoBox {padding:5vw; } .section06 .conBox .infoBox .btnWrap {margin:5vw 0 0;} .section06 .conBox .infoBox h2 {font-size:5vw; margin:0 0 2vw; } .section06 .conBox .infoBox .infoList li {margin:0 0 2vw; } .section06 .conBox .infoBox .infoList li h4 {font-size:3.4vw; } .section06 .conBox .infoBox .infoList li i {margin:0 1.5vw 0 0; width:3vw; } .section06 .conBox .infoBox .btnWrap a {width:auto; height:auto; margin:0 1.5vw 0 0; padding:3vw 6vw; line-height:1; font-size: 3.4vw; } .section06 .conBox .moveAni {right:-15%; } } /*============================================================================================================ SECTION 07 가맹상담 (테두리 복구 및 중앙 정렬 완성본) ============================================================================================================*/ .section07 { padding: 140px 0; background: url('/common/img/main/sec06bg01.webp?v=eggp1') no-repeat bottom center / cover; } /* 1. 박스 테두리 및 중앙 정렬 */ .section07 .conBox { position: relative; max-width: 1200px; /* 박스 너비 제한 */ margin: 50px auto 0; /* 중앙 정렬 */ border: 2px solid #222; /* 명확한 테두리 */ padding: 80px 50px; text-align: center; /* 텍스트 중앙 정렬 */ background: transparent; /* 배경색을 투명하게 변경 */ } /* 2. 테두리 모서리 장식 복구 */ .section07 .conBox:before { content: ''; position: absolute; top: -2px; left: -2px; width: 52px; height: 52px; background: url('/common/img/main/sec12img01.png') no-repeat center; z-index: 1; } .section07 .conBox:after { content: ''; position: absolute; top: -2px; right: -2px; width: 52px; height: 52px; background: url('/common/img/main/sec12img01.png') no-repeat center; transform: rotate(90deg); z-index: 1; } .section07 .conBox .conBox-inner:before { content: ''; position: absolute; bottom: -2px; left: -2px; width: 52px; height: 52px; background: url('/common/img/main/sec12img01.png') no-repeat center; transform: rotate(-90deg); z-index: 1; } .section07 .conBox .conBox-inner:after { content: ''; position: absolute; bottom: -2px; right: -2px; width: 52px; height: 52px; background: url('/common/img/main/sec12img01.png') no-repeat center; transform: rotate(-180deg); z-index: 1; } /* 3. 내부 콘텐츠 중앙 정렬 */ .section07 .conBox .conBox-inner { display: flex; flex-direction: column; align-items: center; /* 가로 중앙 */ } .section07 .conBox-inner .txtBox { width: 100%; margin-bottom: 30px; } .section07 .conBox-inner .txtBox h3 { font-size: 32px; font-weight: 700; line-height: 1.3; color: #111; } /* 4. 전화번호 버튼 (가독성 보완) */ .section07 .conBox-inner .callBtn { display: inline-flex; align-items: center; justify-content: center; margin: 20px auto 40px; padding: 0 40px; height: 60px; background: #111; border-radius: 30px; color: #fff !important; } .section07 .conBox-inner .callBtn i { filter: invert(1); /* 아이콘 흰색으로 반전 */ margin-right: 10px; } .section07 .conBox-inner .callBtn span { font-size: 22px; font-weight: 700; color: #fff; } /* 5. 폼 입력창 정렬 */ .section07 .formBox { width: 100%; } .section07 .formBox ul { display: flex; flex-wrap: wrap; justify-content: center; /* 폼 요소 중앙 */ gap: 15px; } .section07 .formBox ul li { width: 100%; text-align: left; /* 라벨과 입력창은 왼쪽 정렬이 사용하기 편함 */ } .section07 .formBox ul li.w50 { width: calc(50% - 8px); } .section07 .formBox ul li span { display: block; font-size: 15px; font-weight: 700; margin-bottom: 8px; color: #333; } .section07 .formBox ul li input, .section07 .formBox ul li textarea { width: 100% !important; height: 55px; border: 1px solid #aaa; border-radius: 5px; padding: 0 15px; font-size: 16px; } /* 6. 하단 동의 및 문의하기 버튼 */ .section07 .formBox .flexBox { margin-top: 30px; flex-direction: column; align-items: center; } .section07 .formBox .btnWrap button { width: 250px; height: 60px; background: #d0112c; color: #fff; font-size: 20px; font-weight: 700; border-radius: 10px; margin-top: 20px; cursor: pointer; } /* 모바일 대응 */ @media all and (max-width:768px){ .section07 .conBox { padding: 50px 20px; width: 92%; } .section07 .formBox ul li.w50 { width: 100%; } .section07 .conBox-inner .txtBox h3 { font-size: 24px; } } /*============================================================================================================ 고정상담 ============================================================================================================*/ .consultWrap {display:none; transition:all 0.3s;} .consultWrap .txtLineBox {position:absolute; bottom:0; left:0; width:100%; height:45px; border-top:1px solid rgba(255,255,255,0.1); background:#18191c; overflow:hidden; } .consultWrap .txtLineBox .txtLine {position: absolute;display: inline-block;overflow: hidden;left: 0; white-space: nowrap;animation: mrqueev1 60s linear infinite; line-height:45px; filter: grayscale(1); opacity:0.5;} .consultWrap .txtLineBox .txtLine.t2 { animation-delay: -30s;} .consultWrap .txtLineBox .txtLine span { display: inline-block; box-sizing: border-box; margin-right:45px;} .consultWrap .btmForm {display:flex; align-items: center; justify-content: space-between; line-height:75px;} .consultWrap .btmForm figure {position: absolute; left: 0; top: -63px;z-index: 1;} .consultWrap .btmForm .colorChange {display:inline-block; position:relative; margin:0 0 0 110px;} .consultWrap .btmForm .colorChange h4 {color:#fff; font-size:22px; letter-spacing:0; } .consultWrap .btmForm .colorChange h4 span {margin:0 0 0 5px;} .consultWrap .btmForm .colorChange h4.color1 {animation: change_color1 1s step-end infinite;} .consultWrap .btmForm .colorChange h4.color2 {position: absolute; top: 0; left: 0;width: 100%; height:calc(100% - 1px); z-index: 1; animation: change_color2 1s step-end infinite; -webkit-animation: change_color2 1s step-end infinite;color:#f8b62c;background:#18191c;} @keyframes change_color1{ 0%, 100%{opacity: 1} 50%{opacity: 0} } @keyframes change_color2{ 0%, 100%{opacity: 0} 50%{ opacity: 1} } .consultWrap .btmForm ul {display: flex; flex-wrap:wrap; margin:0 0 0 40px;} .consultWrap .btmForm ul li {margin:0 10px 0 0;} .consultWrap .btmForm ul li input {width:190px; height:40px; padding:0 10px; font-size:16px; background:#18191c; border:1px solid rgba(255,255,255,0.3); color:#fff; } .consultWrap .btmForm ul li input:hover {border-color:#f8b62c; color:#f8b62c;} .consultWrap .btmForm .flexBox {display:flex; flex-wrap: wrap; } .consultWrap .btmForm .flexBox .titBox {display:flex; align-items: center;} .consultWrap .btmForm .flexBox .titBox a {margin:2px 0 0 4px; color:#fff; font-size:14px; opacity:0.7;} .consultWrap .btmForm .flexBox .inputCheck input {display: none;} .consultWrap .btmForm .flexBox .inputCheck label {position:relative; display:flex; flex-direction: row; flex-wrap: nowrap; align-items: center; cursor:pointer; font-size:16px;} .consultWrap .btmForm .flexBox .inputCheck label span {margin:0 0 0 2px; color:#fff; } .consultWrap .btmForm .flexBox .inputCheck label span a {color:#fff;} .consultWrap .btmForm .flexBox .inputCheck label:before {content:'';display:inline-block;width:20px;height:20px; background:url('/common/img/layout/form_checkb.webp') no-repeat center/cover; opacity:0.5; } .consultWrap .btmForm .flexBox .inputCheck label:after {content:''; position:absolute; left:0; top:0; width:20px; height:20px; background:transparent} .consultWrap .btmForm .flexBox .inputCheck input:checked + label:before {background:url('/common/img/layout/form_checkr.webp') no-repeat center/cover; opacity:1; } .consultWrap .btmForm .flexBox .inputCheck input:checked + label span {color:#d0112c; } .consultWrap .btmForm .flexBox .btnWrap {margin:0 0 0 20px;} .consultWrap .btmForm .flexBox .btnWrap button {width:190px; height:40px; background:#f8b62c; font-size:18px; color:#111; font-weight:700; cursor:pointer;} .scroll.consultWrap {display:block;position:relative; background:#18191c; width:100%; height:120px; transition:all 0.3s; } .scroll.consultWrap.on { position:fixed; bottom:0; left:0; z-index:5; transition:all 0.3s; } @media all and (max-width:1440px){ .consultWrap .btmForm .colorChange h4 {font-size:20px;} .consultWrap .btmForm ul li input{width:160px;} .consultWrap .btmForm ul {margin:0; } .consultWrap .btmForm .flexBox .btnWrap button {width:160px; } .consultWrap .btmForm figure {width:100px; top:-48px;} .consultWrap .btmForm .colorChange {margin:0 0 0 80px;} } @media all and (max-width:1200px){ .consultWrap .btmForm {justify-content:center;} .consultWrap .btmForm .colorChange {display:none; } .consultWrap .btmForm .flexBox .inputCheck label {font-size:15px; } .consultWrap .btmForm ul {margin:0 0 0 100px; width:60%; } .consultWrap .btmForm ul li {width:30%; margin:0 1% 0 0;} .consultWrap .btmForm ul li input {width:100%; } .consultWrap .btmForm .flexBox {width:40%;} .consultWrap .btmForm .flexBox .btnWrap button {width:140px; font-size:16px;} } @media all and (max-width:1024px){ .consultWrap .btmForm figure {display:none; } .consultWrap .btmForm ul {width:55%; margin:0;} .consultWrap .btmForm ul li input {font-size:15px;} .consultWrap .btmForm .flexBox {width:45%;} .consultWrap .btmForm .flexBox .btnWrap button {width:auto; padding:0 20%; font-size:15px; } } @media all and (max-width:768px){ .scroll.consultWrap {display:block; height:auto; padding:3vw 0; } .consultWrap .btmForm ul {width:auto; margin:0 -1%; } .consultWrap .btmForm ul li {width:calc(100% / 3 - 1%); } .consultWrap .btmForm ul li input {font-size:3vw; height:auto; padding:1.5vw; border-radius:1.5vw; } .consultWrap .btmForm .flexBox { justify-content: space-between; width:100%; margin:1.5vw 0 0; } .consultWrap .btmForm {flex-wrap:wrap; line-height:1.3;} .consultWrap .txtLineBox {display:none; } .consultWrap .btmForm figure {display:none; } .consultWrap .btmForm .flexBox .btnWrap button {width:auto; height:auto; padding:1.8vw 7vw; font-size:3.3vw; border-radius:1.5vw; animation:blink-effect 1s ease-in-out infinite alternate; } .consultWrap .btmForm .flexBox .inputCheck label {font-size:3.2vw; } .consultWrap .btmForm .flexBox .titBox a {margin:0 0 0 .5vw; font-size:3.2vw; } } @media all and (max-width:500px){ } .is-hidden { display: none !important; } /* ================= 대표메뉴 가로 흐름 최종 ================= */ .section04 .menuMarquee { overflow: hidden; width: 100%; } .section04 .menuTrack { display: flex; gap: 30px; width: max-content; animation: menuFlow 25s linear infinite; } .section04 .menuItem { width: 600px; height: 600px; border-radius: 20px; overflow: hidden; flex-shrink: 0; } .section04 .menuItem img { width: 100%; height: 100%; object-fit: cover; } /* 핵심 애니메이션 */ @keyframes menuFlow { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* 탭 */ .section04 .menuTabWrap { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 40px 0; } .section04 .menuTabBtn { min-width: 110px; height: 44px; padding: 0 18px; border: 2px solid #5b3725; border-radius: 12px; background: #fff; color: #111; font-size: 18px; font-weight: 700; cursor: pointer; transition: all 0.25s ease; } .section04 .menuTabBtn.active { background: #4a2312; color: #fff; } .section04 .menuTabContent { width: 100%; max-width: 1400px; margin: 0 auto; overflow: hidden; } .section04 .menuTabPanel { display: none; } .section04 .menuTabPanel.active { display: block; } .section04 .menuMarquee { overflow: hidden; width: 100%; } .section04 .menuTrack { display: flex; gap: 30px; width: max-content; animation: menuFlow 25s linear infinite; } .section04 .menuItem { width: 600px; height: 600px; border-radius: 20px; overflow: hidden; flex-shrink: 0; background: transparent; box-shadow: none; transition: transform 0.3s ease, box-shadow 0.3s ease; } .section04 .menuItem img { width: 100%; height: 100%; object-fit: cover; display: block; } @keyframes menuFlow { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media all and (max-width: 1024px) { .section04 .menuTabBtn { min-width: 95px; font-size: 16px; height: 42px; padding: 0 14px; } .section04 .menuItem { width: 220px; height: 300px; } .section04 .menuTrack { gap: 20px; } } @media all and (max-width: 768px) { .section04 .menuTabWrap { gap: 8px; margin: 25px 0 20px; } .section04 .menuTabBtn { min-width: auto; font-size: 14px; height: 40px; padding: 0 12px; border-radius: 10px; } .section04 .menuItem { width: 160px; height: 220px; border-radius: 16px; } .section04 .menuTrack { gap: 14px; animation-duration: 18s; } } /*============================================================================================================ SECTION01 메인 비주얼 애니메이션 겹침 수정 최종 - 비활성 슬라이드 텍스트 숨김 - 활성 슬라이드 텍스트만 노출 - PC/모바일 텍스트 위치 안정화 ============================================================================================================*/ .section01 .swiper-slide { position: relative; overflow: hidden; } .section01 .swiper-slide .bg { z-index: 0 !important; } .section01 .swiper-slide .bg .mask { z-index: 1; } .section01 .swiper-slide .txtBox { z-index: 3 !important; opacity: 0; visibility: hidden; pointer-events: none; top: calc(50% - 40px); transform: translate(-50%, -43%); transition: opacity 0.45s ease, visibility 0.45s ease, transform 0.65s ease; } .section01 .swiper-slide.swiper-slide-active .txtBox { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%); } .section01 .swiper-slide .txtBox h1, .section01 .swiper-slide .txtBox h2, .section01 .swiper-slide .txtBox .main-subtitle, .section01 .swiper-slide .txtBox .main-title, .section01 .swiper-slide .txtBox .main-desc { opacity: 0; } .section01 .swiper-slide-active .txtBox h1, .section01 .swiper-slide-active .txtBox h2 { animation: none !important; } .section01 .swiper-slide.swiper-slide-active .txtBox .main-subtitle { animation: mainVisualFadeUp 0.65s ease both; animation-delay: 0.12s; } .section01 .swiper-slide.swiper-slide-active .txtBox .main-title { animation: mainVisualFadeUp 0.7s ease both; animation-delay: 0.26s; } .section01 .swiper-slide.swiper-slide-active .txtBox .main-desc { animation: mainVisualFadeUp 0.7s ease both; animation-delay: 0.38s; } @keyframes mainVisualFadeUp { 0% { opacity: 0; transform: translateY(28px); } 100% { opacity: 1; transform: translateY(0); } } @media all and (max-width:1440px) { .section01 .swiper-slide .txtBox { text-align: center; } .section01 .swiper-slide .txtBox .main-desc { margin-left: auto; margin-right: auto; } } @media all and (max-width:1200px) { .section01 { min-height: 720px; } .section01 .swiper-slide .txtBox { width: 78%; max-width: 900px; } } @media all and (max-width:768px) { .section01 { height: 86vh; min-height: 520px; } .section01 .swiper-slide .txtBox, .section01 .swiper-slide.slide-hero-center .txtBox { top: 50% !important; left: 50% !important; width: 90% !important; max-width: 90% !important; padding: 0 16px !important; text-align: center !important; transform: translate(-50%, -43%) !important; display: block !important; } .section01 .swiper-slide.swiper-slide-active .txtBox, .section01 .swiper-slide.swiper-slide-active.slide-hero-center .txtBox { transform: translate(-50%, -50%) !important; } .section01 .swiper-slide .txtBox h1 { margin: 2vw 0 0; } .section01 .swiper-slide .txtBox .main-subtitle { font-size: 4vw; line-height: 1.4; } .section01 .swiper-slide .txtBox .main-title { font-size: 11vw; line-height: 1.05; letter-spacing: -0.3vw; } .section01 .swiper-slide .txtBox .main-desc { margin: 4vw auto 0; max-width: 100%; font-size: 3.5vw; line-height: 1.6; } .section01 .swiper-slide.swiper-slide-active .txtBox .main-subtitle, .section01 .swiper-slide.swiper-slide-active .txtBox .main-title, .section01 .swiper-slide.swiper-slide-active .txtBox .main-desc { animation-duration: 0.55s; } } @media all and (max-width:500px) { .section01 { height: 82vh; min-height: 480px; } .section01 .swiper-slide .txtBox .main-subtitle { font-size: 4.2vw; } .section01 .swiper-slide .txtBox .main-title { font-size: 12vw; } .section01 .swiper-slide .txtBox .main-desc { font-size: 3.7vw; } } /* ========================================================= SECTION01 메인 타이틀 미표시 긴급 수정 v2 - 기본 텍스트는 보이게 처리 - 비활성 슬라이드만 숨김 - active 클래스 충돌 시에도 타이틀/설명 opacity 복구 ========================================================= */ .section01 .swiper-slide .txtBox { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 5 !important; } .section01 .swiper-slide .txtBox h1, .section01 .swiper-slide .txtBox h2, .section01 .swiper-slide .txtBox .main-subtitle, .section01 .swiper-slide .txtBox .main-title, .section01 .swiper-slide .txtBox .main-desc { opacity: 1 !important; visibility: visible !important; } /* Swiper가 활성화된 뒤에는 active가 아닌 슬라이드 텍스트만 숨김 */ .section01 .swiper-slide:not(.swiper-slide-active) .txtBox { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* 활성 슬라이드는 확실하게 표시 */ .section01 .swiper-slide.swiper-slide-active .txtBox, .section01 .swiper-slide.swiper-slide-duplicate-active .txtBox { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .section01 .swiper-slide.swiper-slide-active .txtBox h1, .section01 .swiper-slide.swiper-slide-active .txtBox h2, .section01 .swiper-slide.swiper-slide-active .txtBox .main-subtitle, .section01 .swiper-slide.swiper-slide-active .txtBox .main-title, .section01 .swiper-slide.swiper-slide-active .txtBox .main-desc, .section01 .swiper-slide.swiper-slide-duplicate-active .txtBox h1, .section01 .swiper-slide.swiper-slide-duplicate-active .txtBox h2, .section01 .swiper-slide.swiper-slide-duplicate-active .txtBox .main-subtitle, .section01 .swiper-slide.swiper-slide-duplicate-active .txtBox .main-title, .section01 .swiper-slide.swiper-slide-duplicate-active .txtBox .main-desc { opacity: 1 !important; visibility: visible !important; } /* 기존 bounceInUp가 opacity를 다시 0으로 만드는 충돌 방지 */ .section01 .swiper-slide-active .txtBox h1, .section01 .swiper-slide-active .txtBox h2 { animation: none !important; } /* 모바일 중앙 정렬 유지 */ @media all and (max-width:768px) { .section01 .swiper-slide .txtBox, .section01 .swiper-slide.slide-hero-center .txtBox { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 90% !important; max-width: 90% !important; padding: 0 16px !important; text-align: center !important; } } /* sub.css */ /* 개인정보 수집·이용에 대한 동의 */ .agree_info {padding:var(--header-scroll-height-) 0 0 0;} .agree_info article {width:100%; padding:150px 0;} .agree_info article .info_wrap {width:100%; max-width:1024px; margin:0 auto;} .agree_info article .info_wrap .tit h1 {color:#333; font-size:32px; font-weight:600;} .agree_info article .info_wrap .infoCon {position:relative; padding:40px 0 0 0;} .agree_info article .info_wrap .infoCon > div {line-height:1.7;} .agree_info article .info_wrap .infoCon > div h4 {margin:0 0 12px; font-size:22px; font-weight:600;} .agree_info article .info_wrap .infoCon > div p {color:#333; font-size:18px; font-weight:500;} .agree_info article .info_wrap .infoCon > div p.dot {margin:20px 0 0; padding:0 0 0 10px; text-indent:-7px;} @media all and (max-width:1024px){ /* 개인정보 수집·이용에 대한 동의 */ .agree_info article {padding:120px 0;} .agree_info article .info_wrap .tit h1 {font-size:28px;} .agree_info article .info_wrap .infoCon {padding:35px 0 0 0;} .agree_info article .info_wrap .infoCon > div {line-height:1.6;} .agree_info article .info_wrap .infoCon > div h4 {margin:0 0 10px; font-size:20px;} .agree_info article .info_wrap .infoCon > div p {font-size:16px;} .agree_info article .info_wrap .infoCon > div p.dot {margin:15px 0 0; padding:0 0 0 10px; text-indent:-7px;} } @media all and (max-width:768px){ /* 개인정보 수집·이용에 대한 동의 */ .agree_info {padding:calc(50px + 6.5vw) 0 0 0;} .agree_info article {padding:15vw 0;} .agree_info article .info_wrap .tit h1 {font-size:5.2vw;} .agree_info article .info_wrap .infoCon {padding:5vw 0 0 0;} .agree_info article .info_wrap .infoCon > div h4 {margin:0 0 2.3vw; font-size:3.8vw;} .agree_info article .info_wrap .infoCon > div p {font-size:3.4vw;} .agree_info article .info_wrap .infoCon > div p.dot {margin:3vw 0 0; padding:0 0 0 10px; text-indent:-7px;} } .interview {padding:var(--header-scroll-height-) 0 0 0; background:#f1eddc;} .interview article {width:100%; padding:120px 0;} .interview article .tit h1 {color:#333; font-size:38px; font-weight:600; text-align:center; } .interview article .conBox {margin:60px 0 0;} @media all and (max-width:1200px){ .interview article {padding:100px 0;} .interview article .tit h1 {font-size:30px; } .interview article .conBox {margin:40px 0 0;} } @media all and (max-width:768px){ .interview article {padding:15vw 0;} .interview article .tit h1 {font-size:6vw; } .interview article .conBox {margin:7vw 0 0;} } /* page_num */ .page_num {text-align:center; margin:70px auto 0; padding:0 !important;} .page_num * {font-size:0; box-sizing:border-box;} .page_num ul {display:inline-flex; align-items:center;} .page_num ul li {} .page_num ul li a {display:block; width:40px; height:40px;} .page_num ul li .num {width:auto; height:auto; margin:0 10px; padding:0 4px; line-height:1.5; font-size:17px; font-weight:400; color:#7e7e7e;} .page_num ul li .num.active {color:#d0112c; font-weight:500; border-bottom:1px solid #d0112c;} .page_num ul li .first {background:url('/common/img/layout/paging-first.png') no-repeat center / 100%; border:1px solid #ddd;} .page_num ul li .prev {background:url('/common/img/layout/paging-prev.png') no-repeat center / 100%; margin:0 18px 0 10px; border:1px solid #ddd;} .page_num ul li .next {background:url('/common/img/layout/paging-next.png') no-repeat center / 100%; margin:0 10px 0 18px; border:1px solid #ddd;} .page_num ul li .last {background:url('/common/img/layout/paging-last.png') no-repeat center / 100%; border:1px solid #ddd;} @media all and (max-width:768px){ /* page_num */ .page_num {margin:6vw auto 0; padding:0 !important;} .page_num ul li a {display:block; width:7vw; height:7vw;} .page_num ul li .num {margin:0 1.6vw; padding:0 0.6vw; font-size:3.2vw;} .page_num ul li .first {background:url('/common/img/layout/paging-first.png') no-repeat center / 100%;} .page_num ul li .prev {background:url('/common/img/layout/paging-prev.png') no-repeat center / 100%; margin:0 2.4vw 0 1.6vw;} .page_num ul li .next {background:url('/common/img/layout/paging-next.png') no-repeat center / 100%; margin:0 1.6vw 0 2.4vw;} .page_num ul li .last {background:url('/common/img/layout/paging-last.png') no-repeat center / 100%;} } /* swiper-bundle.css */ /** * Swiper 6.1.2 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://swiperjs.com * * Copyright 2014-2020 Vladimir Kharlampidi * * Released under the MIT License * * Released on: August 17, 2020 */ @font-face { font-family: 'swiper-icons'; src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff'); font-weight: 400; font-style: normal; } :root { --swiper-theme-color: #007aff; } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { flex-wrap: wrap; } .swiper-container-multirow-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-container-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } /* 3D Effects */ .swiper-container-3d { perspective: 1200px; } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow { transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } /* CSS Mode */ .swiper-container-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-container-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: y mandatory; } :root { --swiper-navigation-size: 44px; /* --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(-1 * var(--swiper-navigation-size) / 2); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; text-transform: none; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: 'prev'; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content: 'next'; } .swiper-button-prev.swiper-button-white, .swiper-button-next.swiper-button-white { --swiper-navigation-color: #ffffff; } .swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black { --swiper-navigation-color: #000000; } .swiper-button-lock { display: none; } :root { /* --swiper-pagination-color: var(--swiper-theme-color); */ } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 10px; left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: 0.2; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { opacity: 1; background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } /* Progress */ .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-white { --swiper-pagination-color: #ffffff; } .swiper-pagination-black { --swiper-pagination-color: #000000; } .swiper-pagination-lock { display: none; } /* Scrollbar */ .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } /* Preloader */ :root { /* --swiper-preloader-color: var(--swiper-theme-color); */ } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; animation: swiper-preloader-spin 1s infinite linear; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } /* a11y */ .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube.swiper-container-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; background: #000; opacity: 0.6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0; } .swiper-container-flip { overflow: visible; } .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* animations.css */ /*animations*/ /****************** * Bounce in right * *******************/ .animated { -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated50 { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated100 { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated150 { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated200 { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated250 { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated300 { -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated350 { -webkit-animation-duration: 3.5s; animation-duration: 3.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated400 { -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated450 { -webkit-animation-duration: 4.5s; animation-duration: 4.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated500 { -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated550 { -webkit-animation-duration: 5.5s; animation-duration: 5.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated600 { -webkit-animation-duration: 6s; animation-duration: 6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated650 { -webkit-animation-duration: 6.5s; animation-duration: 6.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated700 { -webkit-animation-duration: 7s; animation-duration: 7s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated750 { -webkit-animation-duration: 7.5s; animation-duration: 7.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated800 { -webkit-animation-duration: 8s; animation-duration: 8s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated850 { -webkit-animation-duration: 8.5s; animation-duration: 8.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated900 { -webkit-animation-duration: 9s; animation-duration: 9s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated950 { -webkit-animation-duration: 9.5s; animation-duration: 9.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated1000 { -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /* Added by Andy Meetan */ .delay-0 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .delay-1 { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .delay-2 { -webkit-animation-delay: 1s; animation-delay: 1s; } .delay-3 { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .delay-50 { -webkit-animation-delay: 0.05s; animation-delay: 0.05s; } .delay-100 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .delay-150 { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; } .delay-200 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .delay-250 { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } .delay-300 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .delay-350 { -webkit-animation-delay: 0.35s; animation-delay: 0.35s; } .delay-400 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .delay-450 { -webkit-animation-delay: 0.45s; animation-delay: 0.45s; } .delay-500 { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .delay-550 { -webkit-animation-delay: 0.55s; animation-delay: 0.55s; } .delay-600 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .delay-650 { -webkit-animation-delay: 0.65s; animation-delay: 0.65s; } .delay-700 { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .delay-750 { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; } .delay-800 { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .delay-850 { -webkit-animation-delay: 0.85s; animation-delay: 0.85s; } .delay-900 { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .delay-950 { -webkit-animation-delay: 0.95s; animation-delay: 0.95s; } .delay-1000 { -webkit-animation-delay: 1s; animation-delay: 1s; } .delay-1050 { -webkit-animation-delay: 1.05s; animation-delay: 1.05s; } .delay-1100 { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } .delay-1150 { -webkit-animation-delay: 1.15s; animation-delay: 1.15s; } .delay-1200 { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .delay-1250 { -webkit-animation-delay: 1.25s; animation-delay: 1.25s; } .delay-1300 { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; } .delay-1350 { -webkit-animation-delay: 1.35s; animation-delay: 1.35s; } .delay-1400 { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } .delay-1450 { -webkit-animation-delay: 1.45s; animation-delay: 1.45s; } .delay-1500 { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .delay-1550 { -webkit-animation-delay: 1.55s; animation-delay: 1.55s; } .delay-1600 { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; } .delay-1650 { -webkit-animation-delay: 1.65s; animation-delay: 1.65s; } .delay-1700 { -webkit-animation-delay: 1.7s; animation-delay: 1.7s; } .delay-1750 { -webkit-animation-delay: 1.75s; animation-delay: 1.75s; } .delay-1800 { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; } .delay-1850 { -webkit-animation-delay: 1.85s; animation-delay: 1.85s; } .delay-1900 { -webkit-animation-delay: 1.9s; animation-delay: 1.9s; } .delay-1950 { -webkit-animation-delay: 1.95s; animation-delay: 1.95s; } .delay-2000 { -webkit-animation-delay: 2s; animation-delay: 2s; } .delay-2050 { -webkit-animation-delay: 2.05s; animation-delay: 2.05s; } .delay-2100 { -webkit-animation-delay: 2.1s; animation-delay: 2.1s; } .delay-2150 { -webkit-animation-delay: 2.15s; animation-delay: 2.15s; } .delay-2200 { -webkit-animation-delay: 2.2s; animation-delay: 2.2s; } .delay-2250 { -webkit-animation-delay: 2.25s; animation-delay: 2.25s; } .delay-2300 { -webkit-animation-delay: 2.3s; animation-delay: 2.3s; } .delay-2350 { -webkit-animation-delay: 2.35s; animation-delay: 2.35s; } .delay-2400 { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; } .delay-2450 { -webkit-animation-delay: 2.45s; animation-delay: 2.45s; } .delay-2500 { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } .delay-2550 { -webkit-animation-delay: 2.55s; animation-delay: 2.55s; } .delay-2600 { -webkit-animation-delay: 2.6s; animation-delay: 2.6s; } .delay-2650 { -webkit-animation-delay: 2.65s; animation-delay: 2.65s; } .delay-2700 { -webkit-animation-delay: 2.7s; animation-delay: 2.7s; } .delay-2750 { -webkit-animation-delay: 2.75s; animation-delay: 2.75s; } .delay-2800 { -webkit-animation-delay: 2.8s; animation-delay: 2.8s; } .delay-2850 { -webkit-animation-delay: 2.85s; animation-delay: 2.85s; } .delay-2900 { -webkit-animation-delay: 2.9s; animation-delay: 2.9s; } .delay-2950 { -webkit-animation-delay: 2.95s; animation-delay: 2.95s; } .delay-3000 { -webkit-animation-delay: 3s; animation-delay: 3s; } .delay-3050 { -webkit-animation-delay: 3.05s; animation-delay: 3.05s; } .delay-3100 { -webkit-animation-delay: 3.1s; animation-delay: 3.1s; } .delay-3150 { -webkit-animation-delay: 3.15s; animation-delay: 3.15s; } .delay-3200 { -webkit-animation-delay: 3.2s; animation-delay: 3.2s; } .delay-3250 { -webkit-animation-delay: 3.25s; animation-delay: 3.25s; } .delay-3300 { -webkit-animation-delay: 3.3s; animation-delay: 3.3s; } .delay-3350 { -webkit-animation-delay: 3.35s; animation-delay: 3.35s; } .delay-3400 { -webkit-animation-delay: 3.4s; animation-delay: 3.4s; } .delay-3450 { -webkit-animation-delay: 3.45s; animation-delay: 3.45s; } .delay-3500 { -webkit-animation-delay: 3.5s; animation-delay: 3.5s; } .delay-3550 { -webkit-animation-delay: 3.55s; animation-delay: 3.55s; } .delay-3600 { -webkit-animation-delay: 3.6s; animation-delay: 3.6s; } .delay-3650 { -webkit-animation-delay: 3.65s; animation-delay: 3.65s; } .delay-3700 { -webkit-animation-delay: 3.7s; animation-delay: 3.7s; } .delay-3750 { -webkit-animation-delay: 3.75s; animation-delay: 3.75s; } .delay-3800 { -webkit-animation-delay: 3.8s; animation-delay: 3.8s; } .delay-3850 { -webkit-animation-delay: 3.85s; animation-delay: 3.85s; } .delay-3900 { -webkit-animation-delay: 3.9s; animation-delay: 3.9s; } .delay-3950 { -webkit-animation-delay: 3.95s; animation-delay: 3.95s; } .delay-4000 { -webkit-animation-delay: 4s; animation-delay: 4s; } .delay-4050 { -webkit-animation-delay: 4.05s; animation-delay: 4.05s; } .delay-4100 { -webkit-animation-delay: 4.1s; animation-delay: 4.1s; } .delay-4150 { -webkit-animation-delay: 4.15s; animation-delay: 4.15s; } .delay-4200 { -webkit-animation-delay: 4.2s; animation-delay: 4.2s; } .delay-4250 { -webkit-animation-delay: 4.25s; animation-delay: 4.25s; } .delay-4300 { -webkit-animation-delay: 4.3s; animation-delay: 4.3s; } .delay-4350 { -webkit-animation-delay: 4.35s; animation-delay: 4.35s; } .delay-4400 { -webkit-animation-delay: 4.4s; animation-delay: 4.4s; } .delay-4450 { -webkit-animation-delay: 4.45s; animation-delay: 4.45s; } .delay-4500 { -webkit-animation-delay: 4.5s; animation-delay: 4.5s; } .delay-4550 { -webkit-animation-delay: 4.55s; animation-delay: 4.55s; } .delay-4600 { -webkit-animation-delay: 4.6s; animation-delay: 4.6s; } .delay-4650 { -webkit-animation-delay: 4.65s; animation-delay: 4.65s; } .delay-4700 { -webkit-animation-delay: 4.7s; animation-delay: 4.7s; } .delay-4750 { -webkit-animation-delay: 4.75s; animation-delay: 4.75s; } .delay-4800 { -webkit-animation-delay: 4.8s; animation-delay: 4.8s; } .delay-4850 { -webkit-animation-delay: 4.85s; animation-delay: 4.85s; } .delay-4900 { -webkit-animation-delay: 4.9s; animation-delay: 4.9s; } .delay-4950 { -webkit-animation-delay: 4.95s; animation-delay: 4.95s; } .delay-5000 { -webkit-animation-delay: 5s; animation-delay: 5s; } .delay-5050 { -webkit-animation-delay: 5.05s; animation-delay: 5.05s; } .delay-5100 { -webkit-animation-delay: 5.1s; animation-delay: 5.1s; } .delay-5150 { -webkit-animation-delay: 5.15s; animation-delay: 5.15s; } .delay-5200 { -webkit-animation-delay: 5.2s; animation-delay: 5.2s; } .delay-5250 { -webkit-animation-delay: 5.25s; animation-delay: 5.25s; } .delay-5300 { -webkit-animation-delay: 5.3s; animation-delay: 5.3s; } .delay-5350 { -webkit-animation-delay: 5.35s; animation-delay: 5.35s; } .delay-5400 { -webkit-animation-delay: 5.4s; animation-delay: 5.4s; } .delay-5450 { -webkit-animation-delay: 5.45s; animation-delay: 5.45s; } .delay-5500 { -webkit-animation-delay: 5.5s; animation-delay: 5.5s; } .delay-5550 { -webkit-animation-delay: 5.55s; animation-delay: 5.55s; } .delay-5600 { -webkit-animation-delay: 5.6s; animation-delay: 5.6s; } .delay-5650 { -webkit-animation-delay: 5.65s; animation-delay: 5.65s; } .delay-5700 { -webkit-animation-delay: 5.7s; animation-delay: 5.7s; } .delay-5750 { -webkit-animation-delay: 5.75s; animation-delay: 5.75s; } .delay-5800 { -webkit-animation-delay: 5.8s; animation-delay: 5.8s; } .delay-5850 { -webkit-animation-delay: 5.85s; animation-delay: 5.85s; } .delay-5900 { -webkit-animation-delay: 5.9s; animation-delay: 5.9s; } .delay-5950 { -webkit-animation-delay: 5.95s; animation-delay: 5.95s; } .delay-6000 { -webkit-animation-delay: 6s; animation-delay: 6s; } .delay-6050 { -webkit-animation-delay: 6.05s; animation-delay: 6.05s; } .delay-6100 { -webkit-animation-delay: 6.1s; animation-delay: 6.1s; } .delay-6150 { -webkit-animation-delay: 6.15s; animation-delay: 6.15s; } .delay-6200 { -webkit-animation-delay: 6.2s; animation-delay: 6.2s; } .delay-6250 { -webkit-animation-delay: 6.25s; animation-delay: 6.25s; } .delay-6300 { -webkit-animation-delay: 6.3s; animation-delay: 6.3s; } .delay-6350 { -webkit-animation-delay: 6.35s; animation-delay: 6.35s; } .delay-6400 { -webkit-animation-delay: 6.4s; animation-delay: 6.4s; } .delay-6450 { -webkit-animation-delay: 6.45s; animation-delay: 6.45s; } .delay-6500 { -webkit-animation-delay: 6.5s; animation-delay: 6.5s; } .delay-6550 { -webkit-animation-delay: 6.55s; animation-delay: 6.55s; } .delay-6600 { -webkit-animation-delay: 6.6s; animation-delay: 6.6s; } .delay-6650 { -webkit-animation-delay: 6.65s; animation-delay: 6.65s; } .delay-6700 { -webkit-animation-delay: 6.7s; animation-delay: 6.7s; } .delay-6750 { -webkit-animation-delay: 6.75s; animation-delay: 6.75s; } .delay-6800 { -webkit-animation-delay: 6.8s; animation-delay: 6.8s; } .delay-6850 { -webkit-animation-delay: 6.85s; animation-delay: 6.85s; } .delay-6900 { -webkit-animation-delay: 6.9s; animation-delay: 6.9s; } .delay-6950 { -webkit-animation-delay: 6.95s; animation-delay: 6.95s; } .delay-7000 { -webkit-animation-delay: 7s; animation-delay: 7s; } .delay-7050 { -webkit-animation-delay: 7.05s; animation-delay: 7.05s; } .delay-7100 { -webkit-animation-delay: 7.1s; animation-delay: 7.1s; } .delay-7150 { -webkit-animation-delay: 7.15s; animation-delay: 7.15s; } .delay-7200 { -webkit-animation-delay: 7.2s; animation-delay: 7.2s; } .delay-7250 { -webkit-animation-delay: 7.25s; animation-delay: 7.25s; } .delay-7300 { -webkit-animation-delay: 7.3s; animation-delay: 7.3s; } .delay-7350 { -webkit-animation-delay: 7.35s; animation-delay: 7.35s; } .delay-7400 { -webkit-animation-delay: 7.4s; animation-delay: 7.4s; } .delay-7450 { -webkit-animation-delay: 7.45s; animation-delay: 7.45s; } .delay-7500 { -webkit-animation-delay: 7.5s; animation-delay: 7.5s; } .delay-7550 { -webkit-animation-delay: 7.55s; animation-delay: 7.55s; } .delay-7600 { -webkit-animation-delay: 7.6s; animation-delay: 7.6s; } .delay-7650 { -webkit-animation-delay: 7.65s; animation-delay: 7.65s; } .delay-7700 { -webkit-animation-delay: 7.7s; animation-delay: 7.7s; } .delay-7750 { -webkit-animation-delay: 7.75s; animation-delay: 7.75s; } .delay-7800 { -webkit-animation-delay: 7.8s; animation-delay: 7.8s; } .delay-7850 { -webkit-animation-delay: 7.85s; animation-delay: 7.85s; } .delay-7900 { -webkit-animation-delay: 7.9s; animation-delay: 7.9s; } .delay-7950 { -webkit-animation-delay: 7.95s; animation-delay: 7.95s; } .delay-8000 { -webkit-animation-delay: 8s; animation-delay: 8s; } .delay-8050 { -webkit-animation-delay: 8.05s; animation-delay: 8.05s; } .delay-8100 { -webkit-animation-delay: 8.1s; animation-delay: 8.1s; } .delay-8150 { -webkit-animation-delay: 8.15s; animation-delay: 8.15s; } .delay-8200 { -webkit-animation-delay: 8.2s; animation-delay: 8.2s; } .delay-8250 { -webkit-animation-delay: 8.25s; animation-delay: 8.25s; } .delay-8300 { -webkit-animation-delay: 8.3s; animation-delay: 8.3s; } .delay-8350 { -webkit-animation-delay: 8.35s; animation-delay: 8.35s; } .delay-8400 { -webkit-animation-delay: 8.4s; animation-delay: 8.4s; } .delay-8450 { -webkit-animation-delay: 8.45s; animation-delay: 8.45s; } .delay-8500 { -webkit-animation-delay: 8.5s; animation-delay: 8.5s; } .delay-8550 { -webkit-animation-delay: 8.55s; animation-delay: 8.55s; } .delay-8600 { -webkit-animation-delay: 8.6s; animation-delay: 8.6s; } .delay-8650 { -webkit-animation-delay: 8.65s; animation-delay: 8.65s; } .delay-8700 { -webkit-animation-delay: 8.7s; animation-delay: 8.7s; } .delay-8750 { -webkit-animation-delay: 8.75s; animation-delay: 8.75s; } .delay-8800 { -webkit-animation-delay: 8.8s; animation-delay: 8.8s; } .delay-8850 { -webkit-animation-delay: 8.85s; animation-delay: 8.85s; } .delay-8900 { -webkit-animation-delay: 8.9s; animation-delay: 8.9s; } .delay-8950 { -webkit-animation-delay: 8.95s; animation-delay: 8.95s; } .delay-9000 { -webkit-animation-delay: 9s; animation-delay: 9s; } .delay-9050 { -webkit-animation-delay: 9.05s; animation-delay: 9.05s; } .delay-9100 { -webkit-animation-delay: 9.1s; animation-delay: 9.1s; } .delay-9150 { -webkit-animation-delay: 9.15s; animation-delay: 9.15s; } .delay-9200 { -webkit-animation-delay: 9.2s; animation-delay: 9.2s; } .delay-9250 { -webkit-animation-delay: 9.25s; animation-delay: 9.25s; } .delay-9300 { -webkit-animation-delay: 9.3s; animation-delay: 9.3s; } .delay-9350 { -webkit-animation-delay: 9.35s; animation-delay: 9.35s; } .delay-9400 { -webkit-animation-delay: 9.4s; animation-delay: 9.4s; } .delay-9450 { -webkit-animation-delay: 9.45s; animation-delay: 9.45s; } .delay-9500 { -webkit-animation-delay: 9.5s; animation-delay: 9.5s; } .delay-9550 { -webkit-animation-delay: 9.55s; animation-delay: 9.55s; } .delay-9600 { -webkit-animation-delay: 9.6s; animation-delay: 9.6s; } .delay-9650 { -webkit-animation-delay: 9.65s; animation-delay: 9.65s; } .delay-9700 { -webkit-animation-delay: 9.7s; animation-delay: 9.7s; } .delay-9750 { -webkit-animation-delay: 9.75s; animation-delay: 9.75s; } .delay-9800 { -webkit-animation-delay: 9.8s; animation-delay: 9.8s; } .delay-9850 { -webkit-animation-delay: 9.85s; animation-delay: 9.85s; } .delay-9900 { -webkit-animation-delay: 9.9s; animation-delay: 9.9s; } .delay-9950 { -webkit-animation-delay: 9.95s; animation-delay: 9.95s; } .delay-10000 { -webkit-animation-delay: 10s; animation-delay: 10s; } .bounceInRight, .bounceInLeft, .bounceInUp, .bounceInDown{ opacity:0; -webkit-transform: translateX(400px); transform: translateX(400px); } .fadeInRight, .fadeInLeft, .fadeInUp, .fadeInDown{ opacity:0; -webkit-transform: translateX(400px); transform: translateX(400px); } .flipInX, .flipInY, .rotateIn, .rotateInUpLeft, .rotateInUpRight, .rotateInDownLeft, .rotateDownUpRight, .rollIn{ opacity:0; } .lightSpeedInRight, .lightSpeedInLeft{ opacity:0; -webkit-transform: translateX(400px); transform: translateX(400px); } /*********** * bounceIn * ************/ @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(.9); } 100% { transform: scale(1); } } .bounceIn.go { -webkit-animation-name: bounceIn; animation-name: bounceIn; } /**************** * bounceInRight * ****************/ @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(400px); } 60% { -webkit-transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(400px); } 60% { transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { opacity: 1; transform: translateX(0); } } .bounceInRight.go { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } /****************** * Bounce in left * *******************/ @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-400px); } 60% { -webkit-transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-400px); } 60% { transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { opacity: 1; transform: translateX(0); } } .bounceInLeft.go { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } /****************** * Bounce in up * *******************/ @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(400px); } 60% { -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; transform: translateY(400px); } 60% { transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .bounceInUp.go { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } /****************** * Bounce in down * *******************/ @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-400px); } 60% { -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-400px); } 60% { transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } .bounceInDown.go { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } /********** * Fade In * **********/ @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1; display:block;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1; display:block;} } .fadeIn0to100{ opacity:0; } .fadeIn0to100.go { -webkit-animation-name: fadeIn0to100; animation-name: fadeIn0to100; } @-webkit-keyframes fadeIn0to100 { 0% {opacity: 0; transform:scale(0);} 100% {opacity: 1; display:block; transform:scale(1);} } @keyframes fadeIn0to100 { 0% {opacity: 0; transform:scale(0);} 100% {opacity: 1; display:block; transform:scale(1);} } .fadeIn0to100{ opacity:0; } .fadeIn0to100.go { -webkit-animation-name: fadeIn0to100; animation-name: fadeIn0to100; } /********** * Grow in * ***********/ @-webkit-keyframes growIn { 0% { -webkit-transform: scale(0.2); opacity:0; } 50% { -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(1); opacity:1; } } @keyframes growIn { 0% { transform: scale(0.2); opacity:0; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity:1; } } .growIn { -webkit-transform: scale(0.2); transform: scale(0.2); opacity:0; } .growIn.go{ -webkit-animation-name: growIn; animation-name: growIn; } /******** * Shake * ********/ @-webkit-keyframes shake { 0%, 100% {-webkit-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} } @keyframes shake { 0%, 100% {transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 20%, 40%, 60%, 80% {transform: translateX(10px);} } .shake.go { -webkit-animation-name: shake; animation-name: shake; } /******** * ShakeUp * ********/ @-webkit-keyframes shakeUp { 0%, 100% {-webkit-transform: translateY(0);} 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateY(-10px);} 20%, 40%, 60%, 80% {-webkit-transform: translateY(10px);} } @keyframes shakeUp { 0%, 100% {transform: translateY(0);} 10%, 30%, 50%, 70%, 90% {transform: translateY(-10px);} 20%, 40%, 60%, 80% {transform: translateY(10px);} } .shakeUp.go { -webkit-animation-name: shakeUp; animation-name: shakeUp; } /************* * FadeInLeft * *************/ @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-400px); } 50%{ opacity: 0.3; } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-400px); } 50%{ opacity: 0.3; } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeft{ opacity: 0; -webkit-transform: translateX(-400px); transform: translateX(-400px); } .fadeInLeft.go { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } /************* * FadeInRight * *************/ @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(400px); } 50%{ opacity: 0.3; } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(400px); } 50%{ opacity: 0.3; } 100% { opacity: 1; transform: translateX(0); } } .fadeInRight{ opacity: 0; -webkit-transform: translateX(400px); transform: translateX(400px); } .fadeInRight.go { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } /************* * FadeInUp * *************/ @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(100px); } 50%{ opacity: 0.3; } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(100px); } 50%{ opacity: 0.3; } 100% { opacity: 1; transform: translateY(0); } } .fadeInUp{ opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } .fadeInUp.go { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } /************* * FadeInDown * *************/ @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-400px); } 50%{ opacity: 0.3; } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-400px); } 50%{ opacity: 0.3; } 100% { opacity: 1; transform: translateY(0); } } .fadeInDown{ opacity: 0; -webkit-transform: translateY(-400px); transform: translateY(-400px); } .fadeInDown.go { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } /***************** * rotateIn * *****************/ @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { transform-origin: center center; transform: rotate(-200deg); opacity: 0; } 100% { transform-origin: center center; transform: rotate(0); opacity: 1; } } .rotateIn.go { -webkit-animation-name: rotateIn; animation-name: rotateIn; } /***************** * rotateInUpLeft * *****************/ @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .rotateInUpLeft.go { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } /******************* * rotateInDownLeft * *******************/ @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .rotateInDownLeft.go { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } /****************** * rotateInUpRight * *******************/ @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .rotateInUpRight.go { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } /******************** * rotateInDownRight * ********************/ @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .rotateInDownRight.go { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } /********* * rollIn * **********/ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } } .rollIn.go { -webkit-animation-name: rollIn; animation-name: rollIn; } /********* * wiggle * **********/ @-webkit-keyframes wiggle { 0% { -webkit-transform: skewX(9deg); } 10% { -webkit-transform: skewX(-8deg); } 20% { -webkit-transform: skewX(7deg); } 30% { -webkit-transform: skewX(-6deg); } 40% { -webkit-transform: skewX(5deg); } 50% { -webkit-transform: skewX(-4deg); } 60% { -webkit-transform: skewX(3deg); } 70% { -webkit-transform: skewX(-2deg); } 80% { -webkit-transform: skewX(1deg); } 90% { -webkit-transform: skewX(0deg); } 100% { -webkit-transform: skewX(0deg); } } @keyframes wiggle { 0% { transform: skewX(9deg); } 10% { transform: skewX(-8deg); } 20% { transform: skewX(7deg); } 30% { transform: skewX(-6deg); } 40% { transform: skewX(5deg); } 50% { transform: skewX(-4deg); } 60% { transform: skewX(3deg); } 70% { transform: skewX(-2deg); } 80% { transform: skewX(1deg); } 90% { transform: skewX(0deg); } 100% { transform: skewX(0deg); } } .wiggle.go { -webkit-animation-name: wiggle; animation-name: wiggle; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } /******** * swing * *********/ @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); } } @keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } .swing.go { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } /******* * tada * ********/ @-webkit-keyframes tada { 0% {-webkit-transform: scale(1);} 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} 100% {-webkit-transform: scale(1) rotate(0);} } @keyframes tada { 0% {transform: scale(1);} 10%, 20% {transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} 100% {transform: scale(1) rotate(0);} } .tada.go { -webkit-animation-name: tada; animation-name: tada; } /********* * wobble * **********/ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); } } @keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0%); } } .wobble.go { -webkit-animation-name: wobble; animation-name: wobble; } /******** * pulse * *********/ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .pulse.go { -webkit-animation-name: pulse; animation-name: pulse; } /*************** * lightSpeedInRight * ****************/ @-webkit-keyframes lightSpeedInRight { 0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedInRight { 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedInRight.go { -webkit-animation-name: lightSpeedInRight; animation-name: lightSpeedInRight; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /*************** * lightSpeedInLeft * ****************/ @-webkit-keyframes lightSpeedInLeft { 0% { -webkit-transform: translateX(-100%) skewX(30deg); opacity: 0; } 60% { -webkit-transform: translateX(20%) skewX(-30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedInLeft { 0% { transform: translateX(-100%) skewX(30deg); opacity: 0; } 60% { transform: translateX(20%) skewX(-30deg); opacity: 1; } 80% { transform: translateX(0%) skewX(15deg); opacity: 1; } 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedInLeft.go { -webkit-animation-name: lightSpeedInLeft; animation-name: lightSpeedInLeft; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /******* * Flip * *******/ @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -webkit-animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -webkit-animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) scale(1); -webkit-animation-timing-function: ease-in; } } @keyframes flip { 0% { transform: perspective(400px) rotateY(0); animation-timing-function: ease-out; } 40% { transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; } 50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; } 80% { transform: perspective(400px) rotateY(360deg) scale(.95); animation-timing-function: ease-in; } 100% { transform: perspective(400px) scale(1); animation-timing-function: ease-in; } } .flip.go { -webkit-backface-visibility: visible !important; -webkit-animation-name: flip; backface-visibility: visible !important; animation-name: flip; } /********** * flipInX * **********/ @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX.go { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInX; backface-visibility: visible !important; animation-name: flipInX; } /********** * flipInY * **********/ @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } 100% { transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY.go { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInY; backface-visibility: visible !important; animation-name: flipInY; } /***************** * Out animations * *****************/ /************ * bounceOut * *************/ @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); } 25% { -webkit-transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); } } @keyframes bounceOut { 0% { transform: scale(1); } 25% { transform: scale(.95); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(.3); } } .bounceOut.goAway { -webkit-animation-name: bounceOut; animation-name: bounceOut; } /************ * bounceOutUp * *************/ @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(20px); } 100% { opacity: 0; transform: translateY(-2000px); } } .bounceOutUp.goAway { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } /************ * bounceOutDown * *************/ @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(-20px); } 100% { opacity: 0; transform: translateY(2000px); } } .bounceOutDown.goAway { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } /************ * bounceOutLeft * *************/ @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(20px); } 100% { opacity: 0; transform: translateX(-2000px); } } .bounceOutLeft.goAway { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } /************ * bounceOutRight * *************/ @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(-20px); } 100% { opacity: 0; transform: translateX(2000px); } } .bounceOutRight.goAway { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } /************ * fadeOut * *************/ @-webkit-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } .fadeOut.goAway { -webkit-animation-name: fadeOut; animation-name: fadeOut; } /************ * fadeOutUp * *************/ @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); } } .fadeOutUp.goAway { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } /************ * fadeOutDown * *************/ @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(2000px); } } .fadeOutDown.goAway { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } /************ * fadeOutLeft * *************/ @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-2000px); } } .fadeOutLeft.goAway { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } /************ * fadeOutRight * *************/ @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(2000px); } } .fadeOutRight.goAway { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } /************ * flipOutX * *************/ @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX.goAway { -webkit-animation-name: flipOutX; -webkit-backface-visibility: visible !important; animation-name: flipOutX; backface-visibility: visible !important; } /************ * flipOutY * *************/ @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipOutY; backface-visibility: visible !important; animation-name: flipOutY; } /************ * lightSpeedOutRight * *************/ @-webkit-keyframes lightSpeedOutRight { 0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOutRight { 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOutRight.goAway { -webkit-animation-name: lightSpeedOutRight; animation-name: lightSpeedOutRight; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } /************ * lightSpeedOutLeft * *************/ @-webkit-keyframes lightSpeedOutLeft { 0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(-100%) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOutLeft { 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { transform: translateX(-100%) skewX(30deg); opacity: 0; } } .lightSpeedOutLeft.goAway { -webkit-animation-name: lightSpeedOutLeft; animation-name: lightSpeedOutLeft; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } /************ * rotateOut * *************/ @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { transform-origin: center center; transform: rotate(0); opacity: 1; } 100% { transform-origin: center center; transform: rotate(200deg); opacity: 0; } } .rotateOut.goAway { -webkit-animation-name: rotateOut; animation-name: rotateOut; } /************ * rotateOutUpLeft * *************/ @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { -transform-origin: left bottom; -transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft.goAway { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } /************ * rotateOutDownLeft * *************/ @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft.goAway { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } /************ * rotateOutUpRight * *************/ @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight.goAway { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } /************ * rollOut * *************/ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; transform: translateX(100%) rotate(120deg); } } .rollOut.goAway { -webkit-animation-name: rollOut; animation-name: rollOut; } /***************** * Short Animations *******************/ /********************* * fadeInUpShort *********************/ @-webkit-keyframes fadeInUpShort { 0% { opacity: 0; -webkit-transform: translateY(30px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInUpShort { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUpShort{ opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); } .fadeInUpShort.go { -webkit-animation-name: fadeInUpShort; animation-name: fadeInUpShort; } /********************* * fadeInUpShortop1 *********************/ @-webkit-keyframes fadeInUpShortop1 { 0% { opacity: 1; -webkit-transform: translateY(30px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInUpShortop1 { 0% { opacity: 1; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUpShortop1{ opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } .fadeInUpShortop1.go { -webkit-animation-name: fadeInUpShortop1; animation-name: fadeInUpShortop1; } /********************* * fadeInDownShort *********************/ @-webkit-keyframes fadeInDownShort { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInDownShort { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDownShort{ opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } .fadeInDownShort.go { -webkit-animation-name: fadeInDownShort; animation-name: fadeInDownShort; } /********************* * fadeInRightShort *********************/ @-webkit-keyframes fadeInRightShort { 0% { opacity: 0; -webkit-transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes fadeInRightShort { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInRightShort { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } .fadeInRightShort.go { -webkit-animation-name: fadeInRightShort; animation-name: fadeInRightShort; } /********************* * fadeInLeftShort *********************/ @-webkit-keyframes fadeInLeftShort { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes fadeInLeftShort { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeftShort { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } .fadeInLeftShort.go { -webkit-animation-name: fadeInLeftShort; animation-name: fadeInLeftShort; } /* xeicon.min.css */ /*! * XEIcon 2.3.3 by @NAVER - http://xpressengine.github.io/XEIcon/ - @XEIcon * License - http://xpressengine.github.io/XEIcon/license.html (Font: SIL OFL 1.1, CSS: MIT License) */@font-face{font-family:xeicon;src:url(/common/fonts/xeicon.eot?3ka2yj);src:url(/common/fonts/xeicon.eot?3ka2yj#iefix) format("embedded-opentype"),url(/common/fonts/xeicon.woff2?3ka2yj) format("woff2"),url(/common/fonts/xeicon.ttf?3ka2yj) format("truetype"),url(/common/fonts/xeicon.woff?3ka2yj) format("woff"),url(/common/fonts/xeicon.svg?3ka2yj#xeicon) format("svg");font-weight:400;font-style:normal}[class*=" xi-"],[class^=xi-]{font-family:xeicon!important;display:inline-block;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.xi-home:before{content:"\e900"}.xi-home-o:before{content:"\e902"}.xi-bars:before{content:"\e91c"}.xi-hamburger-back:before{content:"\eb46"}.xi-hamburger-out:before{content:"\eb45"}.xi-apps:before{content:"\e903"}.xi-ellipsis-h:before{content:"\e94a"}.xi-ellipsis-v:before{content:"\e949"}.xi-drag-vertical:before{content:"\e996"}.xi-drag-handle:before{content:"\e960"}.xi-arrow-top:before{content:"\e912"}.xi-arrow-bottom:before{content:"\e904"}.xi-arrow-left:before{content:"\e906"}.xi-arrow-right:before{content:"\e907"}.xi-arrow-up:before{content:"\e915"}.xi-arrow-down:before{content:"\e905"}.xi-long-arrow-left:before{content:"\e908"}.xi-long-arrow-right:before{content:"\e90b"}.xi-long-arrow-up:before{content:"\e909"}.xi-long-arrow-down:before{content:"\e90a"}.xi-angle-left:before{content:"\e93b"}.xi-angle-left-min:before{content:"\e93c"}.xi-angle-left-thin:before{content:"\e93d"}.xi-angle-right:before{content:"\e93e"}.xi-angle-right-min:before{content:"\e93f"}.xi-angle-right-thin:before{content:"\e940"}.xi-angle-up:before{content:"\e944"}.xi-angle-up-min:before{content:"\e945"}.xi-angle-up-thin:before{content:"\e946"}.xi-angle-down:before{content:"\e941"}.xi-angle-down-min:before{content:"\e942"}.xi-angle-down-thin:before{content:"\e943"}.xi-caret-up:before{content:"\e92f"}.xi-caret-up-min:before{content:"\e930"}.xi-caret-down:before{content:"\e935"}.xi-caret-down-min:before{content:"\e936"}.xi-caret-up-circle:before{content:"\e931"}.xi-caret-up-circle-o:before{content:"\e932"}.xi-caret-down-circle:before{content:"\e937"}.xi-caret-down-circle-o:before{content:"\e938"}.xi-caret-up-square:before{content:"\e933"}.xi-caret-up-square-o:before{content:"\e934"}.xi-caret-down-square:before{content:"\e939"}.xi-caret-down-square-o:before{content:"\e93a"}.xi-arrows-h:before{content:"\e90e"}.xi-arrows-v:before{content:"\e90f"}.xi-expand:before{content:"\e910"}.xi-compress:before{content:"\e911"}.xi-arrows:before{content:"\e90c"}.xi-arrows-alt:before{content:"\e90d"}.xi-compare-arrows:before{content:"\e947"}.xi-scroll:before{content:"\e94b"}.xi-dashboard:before{content:"\e948"}.xi-dashboard-o:before{content:"\e95e"}.xi-refresh:before{content:"\e973"}.xi-catched:before{content:"\e923"}.xi-renew:before{content:"\e977"}.xi-sync:before{content:"\e982"}.xi-eye:before{content:"\e951"}.xi-eye-o:before{content:"\e950"}.xi-eye-off:before{content:"\e953"}.xi-eye-slash:before{content:"\e953"}.xi-eye-off-o:before{content:"\e952"}.xi-eye-slash2:before{content:"\e952"}.xi-lock:before{content:"\e964"}.xi-lock-o:before{content:"\e966"}.xi-unlock:before{content:"\e965"}.xi-unlock-o:before{content:"\e967"}.xi-trash:before{content:"\e96e"}.xi-trash-o:before{content:"\e96f"}.xi-flag:before{content:"\e961"}.xi-flag-o:before{content:"\e962"}.xi-expand-square:before{content:"\e954"}.xi-compress-square:before{content:"\e955"}.xi-log-in:before{content:"\e963"}.xi-log-out:before{content:"\e972"}.xi-search:before{content:"\e97a"}.xi-magnifier:before{content:"\e97a"}.xi-zoom-in:before{content:"\e97b"}.xi-magnifier-expand:before{content:"\e97b"}.xi-zoom-out:before{content:"\e97c"}.xi-magnifier-reduce:before{content:"\e97c"}.xi-subdirectory:before{content:"\e97e"}.xi-subdirectory-arrow:before{content:"\e981"}.xi-external-link:before{content:"\e980"}.xi-cog:before{content:"\e986"}.xi-view-array:before{content:"\e983"}.xi-view-carousel:before{content:"\e984"}.xi-view-column:before{content:"\e985"}.xi-view-day:before{content:"\e98d"}.xi-view-list:before{content:"\e993"}.xi-view-module:before{content:"\e997"}.xi-view-stream:before{content:"\e99a"}.xi-wrench:before{content:"\e99b"}.xi-filter:before{content:"\e9d9"}.xi-funnel:before{content:"\e9d9"}.xi-plus:before{content:"\e913"}.xi-plus-min:before{content:"\e914"}.xi-plus-thin:before{content:"\e9c5"}.xi-minus:before{content:"\e91a"}.xi-minus-min:before{content:"\e91b"}.xi-minus-thin:before{content:"\e9c1"}.xi-close:before{content:"\e921"}.xi-close-min:before{content:"\e922"}.xi-close-thin:before{content:"\e9af"}.xi-check:before{content:"\e928"}.xi-check-min:before{content:"\e929"}.xi-check-thin:before{content:"\e92a"}.xi-plus-circle:before{content:"\e916"}.xi-plus-circle-o:before{content:"\e917"}.xi-minus-circle:before{content:"\e91d"}.xi-minus-circle-o:before{content:"\e91e"}.xi-close-circle:before{content:"\e924"}.xi-close-circle-o:before{content:"\e925"}.xi-check-circle:before{content:"\e92b"}.xi-check-circle-o:before{content:"\e92c"}.xi-plus-square:before{content:"\e918"}.xi-plus-square-o:before{content:"\e919"}.xi-minus-square:before{content:"\e91f"}.xi-minus-square-o:before{content:"\e920"}.xi-close-square:before{content:"\e926"}.xi-close-square-o:before{content:"\e927"}.xi-check-square:before{content:"\e92d"}.xi-check-box:before{content:"\e92d"}.xi-checkbox-blank:before{content:"\ea0e"}.xi-check-square-o:before{content:"\e92e"}.xi-checkbox-checked:before{content:"\e92e"}.xi-radiobox-blank:before{content:"\e9c6"}.xi-radiobox-checked:before{content:"\e9c7"}.xi-cut:before{content:"\e9b0"}.xi-label:before{content:"\e9b1"}.xi-label-o:before{content:"\e9b2"}.xi-library-add:before{content:"\e9b3"}.xi-library-bookmark:before{content:"\e9b4"}.xi-tagged-book:before{content:"\e9b4"}.xi-save:before{content:"\e9b9"}.xi-lightbulb:before{content:"\e9be"}.xi-idea:before{content:"\e9be"}.xi-lightbulb-o:before{content:"\e9bf"}.xi-link:before{content:"\e9c0"}.xi-package:before{content:"\e9c2"}.xi-archive:before{content:"\e9c2"}.xi-pen:before{content:"\e9c3"}.xi-pen-o:before{content:"\e9c4"}.xi-undo:before{content:"\e9d2"}.xi-redo:before{content:"\e9c8"}.xi-switch-off:before{content:"\e9c9"}.xi-switch-on:before{content:"\e9ca"}.xi-toggle-off:before{content:"\e9cb"}.xi-toggle-on:before{content:"\e9cd"}.xi-bookmark:before{content:"\ea1c"}.xi-bookmark-o:before{content:"\ea1d"}.xi-tag:before{content:"\ea36"}.xi-tags:before{content:"\ea37"}.xi-mail:before{content:"\ea06"}.xi-envelope:before{content:"\ea06"}.xi-social-email:before{content:"\ea06"}.xi-mail-o:before{content:"\ea07"}.xi-mail-read:before{content:"\ea08"}.xi-envelope-open:before{content:"\ea08"}.xi-mail-read-o:before{content:"\ea09"}.xi-send:before{content:"\ea0b"}.xi-paper-plane:before{content:"\ea0b"}.xi-reply:before{content:"\ea0d"}.xi-reply-all:before{content:"\ea0c"}.xi-share:before{content:"\e9fa"}.xi-share-l:before{content:"\e9fa"}.xi-share-alt:before{content:"\e9e9"}.xi-share-alt-o:before{content:"\e9ea"}.xi-call:before{content:"\e9d3"}.xi-phone:before{content:"\e9d3"}.xi-call-outgoing:before{content:"\e9d4"}.xi-call-incoming:before{content:"\e9d6"}.xi-call-reception:before{content:"\e9d6"}.xi-call-missed:before{content:"\e9d5"}.xi-comment:before{content:"\e9d7"}.xi-comment-o:before{content:"\e9d8"}.xi-forum:before{content:"\e9f0"}.xi-comments:before{content:"\e9f0"}.xi-forum-o:before{content:"\e9f1"}.xi-video-call:before{content:"\ea18"}.xi-xi-film:before{content:"\ea18"}.xi-voicemail:before{content:"\ea19"}.xi-note:before{content:"\ea1a"}.xi-note-o:before{content:"\ea1b"}.xi-at:before{content:"\ea0a"}.xi-message:before{content:"\ea14"}.xi-message-o:before{content:"\ea15"}.xi-speech:before{content:"\ea12"}.xi-speech-o:before{content:"\ea13"}.xi-user-address:before{content:"\e9f4"}.xi-profile:before{content:"\e9f2"}.xi-user-circle:before{content:"\e9f2"}.xi-profile-o:before{content:"\ea2a"}.xi-user:before{content:"\e9f3"}.xi-users:before{content:"\e9f9"}.xi-group:before{content:"\ea2e"}.xi-community:before{content:"\ea2e"}.xi-user-plus:before{content:"\e9f7"}.xi-users-plus:before{content:"\ea17"}.xi-user-o:before{content:"\e9f5"}.xi-users-o:before{content:"\ea04"}.xi-user-plus-o:before{content:"\e9f8"}.xi-star:before{content:"\ea0f"}.xi-star-o:before{content:"\ea16"}.xi-heart:before{content:"\ea10"}.xi-heart-o:before{content:"\ea11"}.xi-thumbs-up:before{content:"\ea28"}.xi-thumbs-down:before{content:"\ea29"}.xi-crown:before{content:"\e9da"}.xi-trophy:before{content:"\ea38"}.xi-emoticon-happy:before{content:"\e9dd"}.xi-happy-face:before{content:"\e9dd"}.xi-emoticon-happy-o:before{content:"\e9ed"}.xi-emoticon-smiley:before{content:"\e9e4"}.xi-smiley-face:before{content:"\e9e4"}.xi-emoticon-smiley-o:before{content:"\e9e6"}.xi-emoticon-neutral:before{content:"\e9eb"}.xi-neutral-face:before{content:"\e9eb"}.xi-emoticon-neutral-o:before{content:"\e9ec"}.xi-emoticon-bad:before{content:"\e9de"}.xi-emoticon-bad-o:before{content:"\e9df"}.xi-emoticon-sad:before{content:"\e9ee"}.xi-sad-face:before{content:"\e9ee"}.xi-emoticon-sad-o:before{content:"\e9ef"}.xi-emoticon-devil:before{content:"\e9e2"}.xi-angry-face:before{content:"\e9e2"}.xi-emoticon-devil-o:before{content:"\e9e3"}.xi-emoticon-cool:before{content:"\e9e0"}.xi-emoticon-cool-o:before{content:"\e9e1"}.xi-bell:before{content:"\e99c"}.xi-bell-o:before{content:"\e99d"}.xi-bell-off:before{content:"\e99e"}.xi-bell-slash:before{content:"\e99e"}.xi-bell-off-o:before{content:"\e99f"}.xi-alarm:before{content:"\ea1e"}.xi-alarm-o:before{content:"\ea1f"}.xi-alarm-off:before{content:"\ea20"}.xi-time:before{content:"\ea2b"}.xi-time-o:before{content:"\ea2c"}.xi-snooze:before{content:"\ea27"}.xi-calendar:before{content:"\e9a0"}.xi-calendar-add:before{content:"\e9a1"}.xi-calendar-remove:before{content:"\e9a2"}.xi-calendar-cancle:before{content:"\e9a3"}.xi-calendar-check:before{content:"\e9a4"}.xi-calendar-list:before{content:"\e9a5"}.xi-new:before{content:"\e9a8"}.xi-new-o:before{content:"\e9a9"}.xi-info:before{content:"\e9a6"}.xi-information-circle:before{content:"\e9a6"}.xi-info-o:before{content:"\e9a7"}.xi-help:before{content:"\e9ad"}.xi-unknown-circle:before{content:"\e9ad"}.xi-help-o:before{content:"\e9ac"}.xi-error:before{content:"\e9aa"}.xi-error-o:before{content:"\e9ab"}.xi-ban:before{content:"\e9ae"}.xi-slash-circle:before{content:"\e9ae"}.xi-warning:before{content:"\ea2d"}.xi-hand-paper:before{content:"\ea21"}.xi-key:before{content:"\ea22"}.xi-security:before{content:"\ea24"}.xi-shield:before{content:"\ea24"}.xi-shield-checked:before{content:"\ea25"}.xi-check-shield:before{content:"\ea25"}.xi-shield-checked-o:before{content:"\ea26"}.xi-align-justify:before{content:"\e956"}.xi-align-left:before{content:"\e957"}.xi-align-center:before{content:"\e958"}.xi-align-right:before{content:"\e959"}.xi-indent:before{content:"\e95a"}.xi-dedent:before{content:"\e95b"}.xi-list-dot:before{content:"\e95c"}.xi-list-ul:before{content:"\e95c"}.xi-list-square:before{content:"\e95d"}.xi-list-ul-square:before{content:"\e95d"}.xi-list-number:before{content:"\ea6b"}.xi-list-ol:before{content:"\ea6b"}.xi-list:before{content:"\e95f"}.xi-list-ul-l:before{content:"\e95f"}.xi-paragraph:before{content:"\e968"}.xi-bold:before{content:"\e96a"}.xi-italic:before{content:"\e96c"}.xi-strikethrough:before{content:"\e969"}.xi-underline:before{content:"\e96b"}.xi-caps:before{content:"\e96d"}.xi-text-size:before{content:"\eaba"}.xi-text-type:before{content:"\e97f"}.xi-type:before{content:"\e97f"}.xi-spellcheck:before{content:"\eaa9"}.xi-translate:before{content:"\eabc"}.xi-line-height:before{content:"\e976"}.xi-lineheight:before{content:"\e976"}.xi-font:before{content:"\ea63"}.xi-text-format:before{content:"\eab9"}.xi-text-color:before{content:"\eaaa"}.xi-color-fill:before{content:"\ea5e"}.xi-color-helper:before{content:"\ea5f"}.xi-scissors:before{content:"\e994"}.xi-document:before{content:"\e998"}.xi-form:before{content:"\e998"}.xi-palette:before{content:"\e995"}.xi-color:before{content:"\e995"}.xi-color-dropper:before{content:"\e97d"}.xi-eye-dropper:before{content:"\e97d"}.xi-eraser:before{content:"\e970"}.xi-eraser-o:before{content:"\e971"}.xi-sort-asc:before{content:"\e974"}.xi-lineheight-plus:before{content:"\e974"}.xi-sort-desc:before{content:"\e975"}.xi-lineheight-minus:before{content:"\e975"}.xi-rotate-right:before{content:"\e978"}.xi-rotate-left:before{content:"\e979"}.xi-layout:before{content:"\e988"}.xi-layout-top:before{content:"\e988"}.xi-layout-o:before{content:"\e98e"}.xi-layout-full:before{content:"\e989"}.xi-layout-full-o:before{content:"\e98f"}.xi-layout-snb:before{content:"\e98a"}.xi-layout-top-left:before{content:"\e98a"}.xi-layout-snb-o:before{content:"\e990"}.xi-layout-aside:before{content:"\e98b"}.xi-layout-top-right:before{content:"\e98b"}.xi-layout-aside-o:before{content:"\e991"}.xi-layout-column:before{content:"\e98c"}.xi-layout-top-three:before{content:"\e98c"}.xi-layout-column-o:before{content:"\e992"}.xi-crop:before{content:"\e999"}.xi-border-color:before{content:"\ea39"}.xi-line-style:before{content:"\ea66"}.xi-line-weight:before{content:"\ea67"}.xi-border-all:before{content:"\e987"}.xi-border-bottom:before{content:"\ea32"}.xi-border-clear:before{content:"\ea33"}.xi-border-horizontal:before{content:"\ea45"}.xi-border-inner:before{content:"\ea46"}.xi-border-left:before{content:"\ea49"}.xi-border-outer:before{content:"\ea4f"}.xi-border-right:before{content:"\ea51"}.xi-border-style:before{content:"\ea52"}.xi-border-top:before{content:"\ea54"}.xi-border-vertical:before{content:"\ea5c"}.xi-valign-top:before{content:"\eabf"}.xi-valign-bottom:before{content:"\eabd"}.xi-valign-center:before{content:"\eabe"}.xi-code:before{content:"\ea5d"}.xi-emoticon:before{content:"\ea62"}.xi-emoji:before{content:"\ea62"}.xi-face:before{content:"\ea62"}.xi-link-insert:before{content:"\ea6a"}.xi-link-l:before{content:"\ea6a"}.xi-link-broken:before{content:"\ea68"}.xi-unlink:before{content:"\ea68"}.xi-omega:before{content:"\ea6c"}.xi-opacity:before{content:"\ea6d"}.xi-overscan:before{content:"\ea78"}.xi-paperclip:before{content:"\ea7f"}.xi-transform:before{content:"\eabb"}.xi-power-off:before{content:"\e94c"}.xi-esc:before{content:"\e94f"}.xi-command:before{content:"\e94e"}.xi-alt:before{content:"\e94d"}.xi-tab:before{content:"\eaf8"}.xi-backspace:before{content:"\eac4"}.xi-capslock:before{content:"\ead6"}.xi-watch:before{content:"\e9b5"}.xi-mouse:before{content:"\e9b6"}.xi-sdcard:before{content:"\e9b7"}.xi-usb-drive:before{content:"\e9b8"}.xi-diskette:before{content:"\e9ba"}.xi-print:before{content:"\e9bb"}.xi-social-print:before{content:"\e9bb"}.xi-fax:before{content:"\e9bc"}.xi-webcam:before{content:"\e9cc"}.xi-projector:before{content:"\e9ce"}.xi-presentation:before{content:"\e9cf"}.xi-plug:before{content:"\e9d0"}.xi-speaker:before{content:"\ea60"}.xi-airplay:before{content:"\eac0"}.xi-alarm-clock:before{content:"\eac1"}.xi-alarm-clock-o:before{content:"\eac2"}.xi-alarm-clock-off:before{content:"\eac3"}.xi-battery:before{content:"\eac5"}.xi-battery-full:before{content:"\eac5"}.xi-battery-o:before{content:"\ead0"}.xi-battery-min:before{content:"\ead0"}.xi-battery-10:before{content:"\eac6"}.xi-battery-20:before{content:"\eac7"}.xi-battery-30:before{content:"\eac8"}.xi-battery-40:before{content:"\eac9"}.xi-battery-50:before{content:"\eacb"}.xi-battery-60:before{content:"\eacc"}.xi-battery-70:before{content:"\eacd"}.xi-battery-80:before{content:"\eace"}.xi-battery-90:before{content:"\eacf"}.xi-bluetooth:before{content:"\ead1"}.xi-bluetooth-off:before{content:"\ead2"}.xi-bluetooth-on:before{content:"\ead3"}.xi-bluetooth-search:before{content:"\ead4"}.xi-brightness:before{content:"\ead5"}.xi-clock:before{content:"\ead7"}.xi-clock-o:before{content:"\ead8"}.xi-contrast:before{content:"\ead9"}.xi-desktop:before{content:"\eada"}.xi-monitor:before{content:"\eada"}.xi-laptop:before{content:"\eae9"}.xi-devices:before{content:"\eadb"}.xi-tablet:before{content:"\eaf9"}.xi-mobile:before{content:"\eaed"}.xi-tv:before{content:"\eafb"}.xi-enter:before{content:"\eadc"}.xi-flashlight:before{content:"\eadd"}.xi-flashlight-off:before{content:"\eade"}.xi-flight-off:before{content:"\eadf"}.xi-flight-on:before{content:"\eae0"}.xi-gamepad:before{content:"\eae1"}.xi-gps:before{content:"\eae2"}.xi-gps-none:before{content:"\eae3"}.xi-gps-off:before{content:"\eae4"}.xi-hdd:before{content:"\eae5"}.xi-hdmi:before{content:"\eae6"}.xi-keyboard:before{content:"\eae7"}.xi-keyboard-o:before{content:"\eae8"}.xi-space-bar:before{content:"\eaf7"}.xi-lock-rotation:before{content:"\eaea"}.xi-chip:before{content:"\eaeb"}.xi-chip-o:before{content:"\eaec"}.xi-mouse-pointer:before{content:"\eaee"}.xi-router:before{content:"\eaef"}.xi-wifi-router:before{content:"\eaef"}.xi-router-o:before{content:"\eaf0"}.xi-signal:before{content:"\eaf1"}.xi-signal-1:before{content:"\eaf2"}.xi-signal-2:before{content:"\eaf3"}.xi-signal-3:before{content:"\eaf4"}.xi-signal-4:before{content:"\eaf5"}.xi-signal-none:before{content:"\eaf6"}.xi-touch:before{content:"\eafa"}.xi-usb:before{content:"\eafc"}.xi-wifi:before{content:"\eafd"}.xi-wifi-signal:before{content:"\eafd"}.xi-wifi-signal-mid:before{content:"\eafe"}.xi-wifi-signal-min:before{content:"\eaff"}.xi-wifi-signal-off:before{content:"\eb00"}.xi-chart-bar:before{content:"\e901"}.xi-book:before{content:"\ea34"}.xi-book-o:before{content:"\ea35"}.xi-play:before{content:"\ea3e"}.xi-caret-right:before{content:"\ea3e"}.xi-play-circle:before{content:"\ea40"}.xi-play-circle-o:before{content:"\ea3f"}.xi-pause-circle:before{content:"\ea3d"}.xi-pause-circle-o:before{content:"\ea3c"}.xi-pause:before{content:"\ea3b"}.xi-stop:before{content:"\ea41"}.xi-recording-stop:before{content:"\eb24"}.xi-recording:before{content:"\eb21"}.xi-record:before{content:"\eb21"}.xi-eject:before{content:"\ea42"}.xi-step-backward:before{content:"\ea43"}.xi-step-forward:before{content:"\ea44"}.xi-backward:before{content:"\ea47"}.xi-forward:before{content:"\ea48"}.xi-fast-backward:before{content:"\eb08"}.xi-fast-forward:before{content:"\eb07"}.xi-camera:before{content:"\ea4b"}.xi-camera-o:before{content:"\ea4a"}.xi-videocam:before{content:"\ea4d"}.xi-video-camera:before{content:"\ea4d"}.xi-videocam-o:before{content:"\ea4c"}.xi-image:before{content:"\ea50"}.xi-image-o:before{content:"\ea4e"}.xi-microphone-o:before{content:"\ea56"}.xi-microphone:before{content:"\ea57"}.xi-microphone-off:before{content:"\ea58"}.xi-microphone-slash:before{content:"\ea58"}.xi-volume-mute:before{content:"\ea59"}.xi-volume:before{content:"\ea59"}.xi-volume-down:before{content:"\ea5a"}.xi-volume-min:before{content:"\ea5a"}.xi-volume-up:before{content:"\ea5b"}.xi-volume-max:before{content:"\ea5b"}.xi-volume-off:before{content:"\eb39"}.xi-volume-slash:before{content:"\eb39"}.xi-album:before{content:"\ea61"}.xi-record-play:before{content:"\ea61"}.xi-cd-r:before{content:"\ea61"}.xi-headset:before{content:"\ea64"}.xi-music:before{content:"\ea65"}.xi-chart-pyramid:before{content:"\ea69"}.xi-chart-bar-square:before{content:"\eb01"}.xi-chart-line:before{content:"\eb02"}.xi-chart-pie:before{content:"\eb03"}.xi-chart-pie-o:before{content:"\eb04"}.xi-equalizer:before{content:"\eb05"}.xi-volume-bar:before{content:"\eb05"}.xi-equalizer-thin:before{content:"\ea55"}.xi-exposure:before{content:"\eb06"}.xi-flash:before{content:"\eb09"}.xi-flash-off:before{content:"\eb0a"}.xi-focus-center:before{content:"\eb0b"}.xi-focus-frame:before{content:"\eb0c"}.xi-focus-weak:before{content:"\eb11"}.xi-paper:before{content:"\eb1e"}.xi-paper-o:before{content:"\eb1f"}.xi-library-books:before{content:"\eb14"}.xi-library-books-o:before{content:"\eb16"}.xi-library-image:before{content:"\eb17"}.xi-library-image-o:before{content:"\eb18"}.xi-library-music:before{content:"\eb19"}.xi-library-video:before{content:"\eb1a"}.xi-movie:before{content:"\eb1b"}.xi-movie-o:before{content:"\eb1c"}.xi-pacman:before{content:"\eb1d"}.xi-radio:before{content:"\eb20"}.xi-repeat:before{content:"\eb25"}.xi-repeat-one:before{content:"\eb26"}.xi-shuffle:before{content:"\eb27"}.xi-timer:before{content:"\eb29"}.xi-timer-o:before{content:"\eb2a"}.xi-timer-off-o:before{content:"\eb2f"}.xi-timer-sand:before{content:"\eb30"}.xi-sandwatch-min:before{content:"\eb30"}.xi-timer-sand-o:before{content:"\eb31"}.xi-trending-flat:before{content:"\eb36"}.xi-trending-down:before{content:"\eb33"}.xi-decline:before{content:"\eb33"}.xi-trending-up:before{content:"\eb37"}.xi-rise:before{content:"\eb37"}.xi-tune:before{content:"\eb38"}.xi-map:before{content:"\eb22"}.xi-map-folding:before{content:"\eb22"}.xi-map-o:before{content:"\eb23"}.xi-my-location:before{content:"\eb5d"}.xi-location-arrow:before{content:"\eb58"}.xi-woman:before{content:"\ea2f"}.xi-man:before{content:"\ea30"}.xi-toilet:before{content:"\ea31"}.xi-pregnant-woman:before{content:"\eb61"}.xi-maternity:before{content:"\eb61"}.xi-walk:before{content:"\eb6d"}.xi-walking:before{content:"\eb6d"}.xi-run:before{content:"\eb63"}.xi-wheelchair:before{content:"\eb6e"}.xi-glass:before{content:"\eb28"}.xi-market:before{content:"\eb2b"}.xi-shopping-bag:before{content:"\eb2b"}.xi-pharmacy:before{content:"\eb2c"}.xi-laundry:before{content:"\eb2e"}.xi-florist:before{content:"\eb32"}.xi-hlz:before{content:"\eb34"}.xi-park:before{content:"\eb35"}.xi-airplane:before{content:"\eb3a"}.xi-all:before{content:"\eb3b"}.xi-flight-takeoff:before{content:"\eb3c"}.xi-flight:before{content:"\eb3c"}.xi-flight-land:before{content:"\eb3d"}.xi-bank:before{content:"\eb3e"}.xi-bank-o:before{content:"\eb3e"}.xi-beach:before{content:"\eb3f"}.xi-bicycle:before{content:"\eb40"}.xi-building:before{content:"\eb41"}.xi-bus:before{content:"\eb42"}.xi-business:before{content:"\eb43"}.xi-cafe:before{content:"\eb44"}.xi-cake:before{content:"\eb47"}.xi-car:before{content:"\eb48"}.xi-church:before{content:"\eb49"}.xi-city:before{content:"\eb4a"}.xi-compass:before{content:"\eb4b"}.xi-compass-o:before{content:"\eb4c"}.xi-convenience-store:before{content:"\eb4d"}.xi-directions:before{content:"\eb4e"}.xi-factory:before{content:"\eb4f"}.xi-fitness-center:before{content:"\eb50"}.xi-garden:before{content:"\eb51"}.xi-gas-station:before{content:"\eb52"}.xi-golf:before{content:"\eb53"}.xi-hand-pointing:before{content:"\eb54"}.xi-hospital:before{content:"\eb55"}.xi-hotel:before{content:"\eb56"}.xi-library:before{content:"\eb57"}.xi-maker:before{content:"\eb59"}.xi-marker-circle:before{content:"\eb59"}.xi-marker-plus:before{content:"\eb5b"}.xi-maker-drop:before{content:"\eb5f"}.xi-map-marker:before{content:"\eb5f"}.xi-marker-check:before{content:"\eb5a"}.xi-motorcycle:before{content:"\eb5c"}.xi-navigation:before{content:"\eb5e"}.xi-pool:before{content:"\eb60"}.xi-restaurant:before{content:"\eb62"}.xi-school:before{content:"\eb64"}.xi-ship:before{content:"\eb65"}.xi-spa:before{content:"\eb66"}.xi-stroller:before{content:"\eb67"}.xi-subway:before{content:"\eb68"}.xi-taxi:before{content:"\eb69"}.xi-theater:before{content:"\eb6a"}.xi-film:before{content:"\eb6a"}.xi-traffic:before{content:"\eb6b"}.xi-train:before{content:"\eb6c"}.xi-cart:before{content:"\eb6f"}.xi-cart-o:before{content:"\e9fb"}.xi-cart-add:before{content:"\e9fc"}.xi-cart-remove:before{content:"\e9fd"}.xi-basket:before{content:"\e9fe"}.xi-box:before{content:"\ea01"}.xi-fragile:before{content:"\ea02"}.xi-coupon:before{content:"\ea03"}.xi-shop:before{content:"\ea05"}.xi-gift:before{content:"\eb70"}.xi-present:before{content:"\eb70"}.xi-gift-o:before{content:"\ea3a"}.xi-exchange:before{content:"\ea53"}.xi-barter:before{content:"\ea53"}.xi-yuan:before{content:"\ea6e"}.xi-won:before{content:"\ea6f"}.xi-yen:before{content:"\ea70"}.xi-pound:before{content:"\ea71"}.xi-euro:before{content:"\ea72"}.xi-rial:before{content:"\ea73"}.xi-dollar:before{content:"\ea74"}.xi-peso:before{content:"\ea75"}.xi-rupee:before{content:"\ea76"}.xi-credit-card:before{content:"\ea77"}.xi-money:before{content:"\ea79"}.xi-piggy-bank:before{content:"\ea7a"}.xi-strongbox:before{content:"\ea7b"}.xi-briefcase:before{content:"\ea7c"}.xi-percent:before{content:"\ea7d"}.xi-calculator:before{content:"\ea7e"}.xi-medicine:before{content:"\eb2d"}.xi-receipt:before{content:"\eb71"}.xi-truck:before{content:"\eb72"}.xi-wallet:before{content:"\eb73"}.xi-file:before{content:"\ea94"}.xi-file-o:before{content:"\ea80"}.xi-file-add:before{content:"\ea95"}.xi-file-add-o:before{content:"\ea81"}.xi-file-remove:before{content:"\ea96"}.xi-file-remove-o:before{content:"\ea82"}.xi-file-text:before{content:"\ea97"}.xi-file-text-o:before{content:"\ea83"}.xi-documents:before{content:"\ea98"}.xi-stack-paper:before{content:"\ea98"}.xi-documents-o:before{content:"\ea84"}.xi-file-image:before{content:"\ea99"}.xi-file-image-o:before{content:"\ea85"}.xi-file-video:before{content:"\ea9a"}.xi-file-video-o:before{content:"\ea86"}.xi-file-music:before{content:"\ea9b"}.xi-file-music-o:before{content:"\ea87"}.xi-file-code:before{content:"\ea9c"}.xi-file-code-o:before{content:"\ea88"}.xi-file-zip:before{content:"\ea9d"}.xi-file-zip-o:before{content:"\ea89"}.xi-file-upload:before{content:"\ea9e"}.xi-file-upload-o:before{content:"\ea8a"}.xi-file-download:before{content:"\ea9f"}.xi-file-download-o:before{content:"\ea8b"}.xi-file-check:before{content:"\eaa0"}.xi-file-check-o:before{content:"\ea8c"}.xi-folder:before{content:"\eaa1"}.xi-folder-o:before{content:"\ea8d"}.xi-folder-open:before{content:"\eaa8"}.xi-folder-shared:before{content:"\eb7d"}.xi-folder-zip:before{content:"\eaa7"}.xi-folder-zip-o:before{content:"\ea93"}.xi-folder-add:before{content:"\eaa2"}.xi-folder-add-o:before{content:"\ea8e"}.xi-folder-remove:before{content:"\eaa3"}.xi-folder-remove-o:before{content:"\ea8f"}.xi-folder-check:before{content:"\eaa4"}.xi-folder-check-o:before{content:"\ea90"}.xi-folder-upload:before{content:"\eaa5"}.xi-folder-upload-o:before{content:"\ea91"}.xi-folder-download:before{content:"\eaa6"}.xi-folder-download-o:before{content:"\ea92"}.xi-attachment:before{content:"\eb74"}.xi-cloud:before{content:"\eb75"}.xi-cloud-o:before{content:"\eb78"}.xi-cloud-off:before{content:"\eb79"}.xi-cloud-upload:before{content:"\eb7a"}.xi-cloud-upload-o:before{content:"\eb7b"}.xi-cloud-download:before{content:"\eb76"}.xi-cloud-download-o:before{content:"\eb77"}.xi-upload:before{content:"\eb7e"}.xi-download:before{content:"\eb7c"}.xi-globus:before{content:"\e9d1"}.xi-browser:before{content:"\e9db"}.xi-browser-text:before{content:"\e9dc"}.xi-rss-square:before{content:"\e9e5"}.xi-central-signal:before{content:"\e9e7"}.xi-central-router:before{content:"\e9e8"}.xi-antenna:before{content:"\e9f6"}.xi-barcode:before{content:"\e9ff"}.xi-qr-code:before{content:"\ea00"}.xi-accessibility:before{content:"\eb7f"}.xi-branch:before{content:"\eb80"}.xi-fork:before{content:"\eb85"}.xi-code-fork:before{content:"\eb85"}.xi-pull-requests:before{content:"\eb92"}.xi-merge:before{content:"\eb8b"}.xi-log:before{content:"\eb8a"}.xi-bug:before{content:"\eb81"}.xi-cookie:before{content:"\eb82"}.xi-fingerprint:before{content:"\eb84"}.xi-css3:before{content:"\eb83"}.xi-html5:before{content:"\eb86"}.xi-javascript:before{content:"\eb87"}.xi-csharp:before{content:"\eb88"}.xi-php:before{content:"\eb91"}.xi-python:before{content:"\eb94"}.xi-milestone:before{content:"\eb8c"}.xi-network-company:before{content:"\eb8d"}.xi-network-folder:before{content:"\eb8e"}.xi-network-home:before{content:"\eb8f"}.xi-home-network:before{content:"\eb8f"}.xi-network-public:before{content:"\eb90"}.xi-cloud-network:before{content:"\eb90"}.xi-puzzle:before{content:"\eb93"}.xi-rss:before{content:"\eb95"}.xi-social-rssfeed:before{content:"\eb95"}.xi-server:before{content:"\eb96"}.xi-network-server:before{content:"\eb97"}.xi-sitemap:before{content:"\eb98"}.xi-sitemap-o:before{content:"\eb99"}.xi-spinner-1:before{content:"\ec33"}.xi-spinner-2:before{content:"\ec34"}.xi-spinner-3:before{content:"\ec35"}.xi-spinner-4:before{content:"\ec36"}.xi-spinner-5:before{content:"\ec37"}.xi-full-moon:before{content:"\eb0d"}.xi-fullmoon:before{content:"\eb0d"}.xi-half-moon:before{content:"\eb0e"}.xi-halfmoon:before{content:"\eb0e"}.xi-crescent:before{content:"\eb9b"}.xi-moon:before{content:"\eb0f"}.xi-night:before{content:"\eb10"}.xi-snow-crystal:before{content:"\eb15"}.xi-snow:before{content:"\eb15"}.xi-cloudy:before{content:"\eb9c"}.xi-fog:before{content:"\eb9d"}.xi-foggy:before{content:"\eb9e"}.xi-lightning:before{content:"\eb9f"}.xi-partly-cloudy:before{content:"\eba0"}.xi-pouring:before{content:"\eba1"}.xi-rain:before{content:"\eba1"}.xi-snowy:before{content:"\eba2"}.xi-heavy-snow:before{content:"\eba2"}.xi-sun:before{content:"\eba3"}.xi-sun-o:before{content:"\eba4"}.xi-sunset:before{content:"\eba5"}.xi-sunset-down:before{content:"\eba6"}.xi-sunset-up:before{content:"\eba7"}.xi-thermometer:before{content:"\eba8"}.xi-tint:before{content:"\eba9"}.xi-humidity:before{content:"\eba9"}.xi-tint-o:before{content:"\ebaa"}.xi-tornado:before{content:"\ebab"}.xi-umbrella:before{content:"\ebac"}.xi-umbrella-o:before{content:"\ebad"}.xi-windy:before{content:"\ebae"}.xi-wind:before{content:"\ebae"}.xi-windy-variant:before{content:"\ebaf"}.xi-windsock:before{content:"\eb13"}.xi-cc-cc:before{content:"\eaad"}.xi-cc-by:before{content:"\eaae"}.xi-cc-sa:before{content:"\eaaf"}.xi-cc-nd:before{content:"\eab0"}.xi-cc-nc:before{content:"\eab1"}.xi-cc-nc-eu:before{content:"\eab2"}.xi-cc-nc-jp:before{content:"\eab3"}.xi-cc-remix:before{content:"\eab4"}.xi-cc-pd:before{content:"\eab5"}.xi-cc-sampling:before{content:"\eab6"}.xi-cc-zero:before{content:"\eab7"}.xi-cc-share:before{content:"\eab8"}.xi-copyleft:before{content:"\ebb0"}.xi-copyright:before{content:"\ebb1"}.xi-registered:before{content:"\eaab"}.xi-trademark:before{content:"\eaac"}.xi-500px:before{content:"\ebb2"}.xi-adobe:before{content:"\ebb3"}.xi-amazon:before{content:"\ebb4"}.xi-android:before{content:"\ebb5"}.xi-apple:before{content:"\ebb6"}.xi-beats:before{content:"\ebb7"}.xi-behance:before{content:"\ebb8"}.xi-bing:before{content:"\ebb9"}.xi-bitbucket:before{content:"\ebba"}.xi-blackberry:before{content:"\ebbb"}.xi-blogger:before{content:"\ebbc"}.xi-cc-amex:before{content:"\ebbe"}.xi-cc-discover:before{content:"\ebbf"}.xi-cc-mastercard:before{content:"\ebc0"}.xi-cc-paypal:before{content:"\ebc1"}.xi-cc-stripe:before{content:"\ebc2"}.xi-cc-visa:before{content:"\ebc3"}.xi-chrome:before{content:"\ebc5"}.xi-codepen:before{content:"\ebc6"}.xi-connectdevelop:before{content:"\ebc7"}.xi-d2:before{content:"\ebc8"}.xi-dashcube:before{content:"\ebc9"}.xi-delicious:before{content:"\ebca"}.xi-deviantart:before{content:"\ebcb"}.xi-digg:before{content:"\ebcc"}.xi-disqus:before{content:"\ebcd"}.xi-dribbble:before{content:"\ebce"}.xi-dropbox:before{content:"\ebcf"}.xi-drupal:before{content:"\ebd0"}.xi-edge:before{content:"\ebd1"}.xi-evernote:before{content:"\ebd2"}.xi-facebook:before{content:"\ebd3"}.xi-facebook-messenger:before{content:"\ebd4"}.xi-facebook-official:before{content:"\ebd5"}.xi-feedly:before{content:"\ebd6"}.xi-firefox:before{content:"\ebd7"}.xi-flickr:before{content:"\eaca"}.xi-flickr-square:before{content:"\ebd8"}.xi-foursquare:before{content:"\ebd9"}.xi-ghost:before{content:"\ebda"}.xi-git:before{content:"\ebdb"}.xi-git-symbol:before{content:"\ebdc"}.xi-github:before{content:"\ebdd"}.xi-github-alt:before{content:"\ebde"}.xi-gmail:before{content:"\ebdf"}.xi-google:before{content:"\ebe0"}.xi-google-play:before{content:"\ebe1"}.xi-google-plus:before{content:"\ebe2"}.xi-google-wallet:before{content:"\ebe3"}.xi-gratipay:before{content:"\ebe4"}.xi-hangouts:before{content:"\ebe5"}.xi-hunie:before{content:"\ebe6"}.xi-illustrator:before{content:"\ebe7"}.xi-illustrator-circle:before{content:"\ebe8"}.xi-instagram:before{content:"\ebe9"}.xi-internet-explorer:before{content:"\ebea"}.xi-jira:before{content:"\ebeb"}.xi-joomla:before{content:"\ebec"}.xi-jsfiddle:before{content:"\ebed"}.xi-kakaostory:before{content:"\ebef"}.xi-kakaotalk:before{content:"\ebee"}.xi-kickstarter:before{content:"\ebf0"}.xi-laravel:before{content:"\eb89"}.xi-line:before{content:"\ebf1"}.xi-line-messenger:before{content:"\ebf2"}.xi-linkedin:before{content:"\ebf3"}.xi-linkedin-square:before{content:"\ebf4"}.xi-linux:before{content:"\ebf5"}.xi-magento:before{content:"\ebf6"}.xi-maxcdn:before{content:"\ebf7"}.xi-medium:before{content:"\ebf8"}.xi-naver:before{content:"\ebf9"}.xi-naver-square:before{content:"\ebfa"}.xi-office:before{content:"\ebfb"}.xi-opencart:before{content:"\ebfc"}.xi-opera:before{content:"\ebfd"}.xi-oscommerce:before{content:"\ebfe"}.xi-path:before{content:"\ebff"}.xi-paypal:before{content:"\ec00"}.xi-photoshop:before{content:"\ec01"}.xi-photoshop-circle:before{content:"\ec02"}.xi-pinterest:before{content:"\ec03"}.xi-pinterest-p:before{content:"\ec04"}.xi-pocket:before{content:"\ec05"}.xi-qq:before{content:"\ec06"}.xi-quicktime:before{content:"\ec07"}.xi-reddit:before{content:"\ec08"}.xi-renren:before{content:"\ec09"}.xi-safari:before{content:"\ec0a"}.xi-sellsy:before{content:"\ec0b"}.xi-silverstripe:before{content:"\ebbd"}.xi-simplybuilt:before{content:"\ec0c"}.xi-sketch:before{content:"\ec0d"}.xi-skype:before{content:"\ec0e"}.xi-slack:before{content:"\ec0f"}.xi-slideshare:before{content:"\ec10"}.xi-soundcloud:before{content:"\ec11"}.xi-spotify:before{content:"\ec12"}.xi-stack-exchange:before{content:"\ec13"}.xi-stack-overflow:before{content:"\ec14"}.xi-steam:before{content:"\ec15"}.xi-steam-square:before{content:"\ec16"}.xi-stumbleupon:before{content:"\ec17"}.xi-stumbleupon-circle:before{content:"\ec18"}.xi-telegram:before{content:"\ec19"}.xi-tencent-weibo:before{content:"\ec1a"}.xi-trello:before{content:"\ec1b"}.xi-tumblr:before{content:"\ec1c"}.xi-tumblr-square:before{content:"\ec1d"}.xi-twich:before{content:"\ec1e"}.xi-twitter:before{content:"\ec1f"}.xi-ubercart:before{content:"\ec20"}.xi-ubuntu:before{content:"\ec21"}.xi-ubuntu-circle:before{content:"\ec22"}.xi-vimeo:before{content:"\ec23"}.xi-vine:before{content:"\ec24"}.xi-vk:before{content:"\ec25"}.xi-wechat:before{content:"\ec26"}.xi-whatsapp:before{content:"\ec27"}.xi-wikipedia:before{content:"\ec28"}.xi-windows:before{content:"\ec29"}.xi-wordpress:before{content:"\ec2a"}.xi-wordpress-official:before{content:"\ec2b"}.xi-xe:before{content:"\ec2c"}.xi-xing:before{content:"\ec2d"}.xi-xpressengine:before{content:"\ec2e"}.xi-yahoo:before{content:"\ec2f"}.xi-yelp:before{content:"\ec30"}.xi-youtube:before{content:"\ec31"}.xi-youtube-play:before{content:"\ec32"}.xi-x{font-size:1.33333em;line-height:.75em;vertical-align:-15%}.xi-2x{font-size:2em}.xi-3x{font-size:3em}.xi-4x{font-size:4em}.xi-5x{font-size:5em}.xi-spin{-webkit-animation:xi-spin 2s infinite linear;animation:xi-spin 2s infinite linear}@-webkit-keyframes xi-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes xi-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.xi-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);transform:rotate(90deg)}.xi-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);transform:rotate(180deg)}.xi-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);transform:rotate(270deg)}.xi-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0);-webkit-transform:scale(-1,1);transform:scale(-1,1)}.xi-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:scale(1,-1);transform:scale(1,-1)}:root .xi-flip-horizontal,:root .xi-flip-vertical,:root .xi-rotate-180,:root .xi-rotate-270,:root .xi-rotate-90{-webkit-filter:none;filter:none}.xi-fw{width:1.28571em;text-align:center}.xi-ul{padding-left:0;margin-left:2.14286em;list-style-type:none}.xi-ul>li{position:relative}.xi-li{position:absolute;left:-2.14286em;width:2.14286em;top:.14286em;text-align:center}.xi-li.xi-lg{left:-1.85714em}.xi-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.pull-right{float:right;margin-right:.3em}.pull-left{float:left;margin-right:.3em}