/* 축소하지 못했습니다. 축소되지 않은 콘텐츠를 반환합니다. (4,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (72,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (77,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (78,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (82,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (83,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-light' (124,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (151,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (170,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (177,21): run-time error CSS1039: Token not allowed after unary operator: '-size-16' (178,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (194,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (224,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (225,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (337,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (348,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (349,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (359,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (381,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (458,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (519,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (615,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (781,21): run-time error CSS1039: Token not allowed after unary operator: '-size-20' (782,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (845,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (922,21): run-time error CSS1039: Token not allowed after unary operator: '-size-20' (923,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (941,21): run-time error CSS1039: Token not allowed after unary operator: '-size-20' (942,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (947,21): run-time error CSS1039: Token not allowed after unary operator: '-size-13' (948,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (952,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (953,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (960,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (961,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (988,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (989,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (1004,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (1044,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (1062,17): run-time error CSS1039: Token not allowed after unary operator: '-point-color' (1066,17): run-time error CSS1039: Token not allowed after unary operator: '-red-color' (1070,17): run-time error CSS1039: Token not allowed after unary operator: '-point-color' (1071,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (1101,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (1119,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (1120,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (1165,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (1240,21): run-time error CSS1039: Token not allowed after unary operator: '-size-15' (1241,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (1250,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (1313,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (1428,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (1542,17): run-time error CSS1039: Token not allowed after unary operator: '-basic-color' (1543,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (1556,17): run-time error CSS1039: Token not allowed after unary operator: '-basic-color' (1557,21): run-time error CSS1039: Token not allowed after unary operator: '-size-20' (1558,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (1587,21): run-time error CSS1039: Token not allowed after unary operator: '-basic-color' (1602,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (1606,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (1611,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (1612,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (1613,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (1618,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (1619,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (1620,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (1649,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (1650,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (1655,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (1661,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-light' (1665,21): run-time error CSS1039: Token not allowed after unary operator: '-size-16' (1666,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (1698,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (1699,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (1709,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (1725,21): run-time error CSS1039: Token not allowed after unary operator: '-size-18' (1726,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (1745,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (1750,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (1792,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (1797,21): run-time error CSS1039: Token not allowed after unary operator: '-size-20' (1804,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (1808,17): run-time error CSS1039: Token not allowed after unary operator: '-point-color' (1817,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (1852,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (1853,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (1859,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (1860,17): run-time error CSS1039: Token not allowed after unary operator: '-red-color' (1875,21): run-time error CSS1039: Token not allowed after unary operator: '-size-16' (1876,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (1899,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (1900,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (1910,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (1991,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2001,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (2016,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (2026,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2033,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-light' (2041,21): run-time error CSS1039: Token not allowed after unary operator: '-size-16' (2042,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2050,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (2051,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (2081,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (2082,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (2092,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (2093,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (2105,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (2115,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2146,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (2147,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2153,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (2157,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2162,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (2163,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (2173,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (2184,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (2189,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (2190,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2221,17): run-time error CSS1038: Expected hex color, found '#Ffff' (2236,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2243,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (2244,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (2274,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (2278,17): run-time error CSS1039: Token not allowed after unary operator: '-basic-color' (2279,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2293,21): run-time error CSS1039: Token not allowed after unary operator: '-size-20' (2294,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2313,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (2335,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (2336,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2360,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (2361,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2365,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (2366,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (2376,21): run-time error CSS1039: Token not allowed after unary operator: '-size-11' (2377,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2388,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (2397,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2404,21): run-time error CSS1039: Token not allowed after unary operator: '-size-18' (2412,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (2413,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (2424,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (2457,21): run-time error CSS1039: Token not allowed after unary operator: '-size-20' (2458,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2462,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2471,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (2483,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2488,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (2502,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2506,17): run-time error CSS1039: Token not allowed after unary operator: '-basic-color' (2511,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2529,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (2545,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2553,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (2620,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (2624,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (2640,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (2706,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (2760,21): run-time error CSS1039: Token not allowed after unary operator: '-size-13' (2767,21): run-time error CSS1039: Token not allowed after unary operator: '-size-13' (2796,21): run-time error CSS1039: Token not allowed after unary operator: '-size-20' (2807,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2808,17): run-time error CSS1039: Token not allowed after unary operator: '-point-color' (2812,21): run-time error CSS1039: Token not allowed after unary operator: '-size-15' (2813,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2841,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (2850,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (2887,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (2902,17): run-time error CSS1039: Token not allowed after unary operator: '-point-color' (2906,17): run-time error CSS1039: Token not allowed after unary operator: '-red-color' (2913,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (2921,21): run-time error CSS1039: Token not allowed after unary operator: '-size-13' (2922,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (2964,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (2968,17): run-time error CSS1039: Token not allowed after unary operator: '-point-color' (2972,17): run-time error CSS1039: Token not allowed after unary operator: '-red-color' (2976,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-color' (3020,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (3027,17): run-time error CSS1039: Token not allowed after unary operator: '-point-color' (3038,17): run-time error CSS1039: Token not allowed after unary operator: '-red-color' (3059,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (3068,17): run-time error CSS1039: Token not allowed after unary operator: '-point-color' (3073,17): run-time error CSS1039: Token not allowed after unary operator: '-red-color' (3129,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (3136,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-color' (3138,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (3174,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (3175,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (3213,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (3217,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (3223,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (3224,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (3245,21): run-time error CSS1039: Token not allowed after unary operator: '-size-13' (3281,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (3282,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (3283,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (3304,21): run-time error CSS1039: Token not allowed after unary operator: '-size-13' (3320,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (3321,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (3327,21): run-time error CSS1039: Token not allowed after unary operator: '-size-11' (3340,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (3345,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (3367,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (3368,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (3438,21): run-time error CSS1039: Token not allowed after unary operator: '-size-20' (3442,17): run-time error CSS1039: Token not allowed after unary operator: '-point-color' (3443,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (3474,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (3478,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (3510,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (3530,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (3569,17): run-time error CSS1039: Token not allowed after unary operator: '-point-color' (3578,17): run-time error CSS1039: Token not allowed after unary operator: '-point-color' (3579,21): run-time error CSS1039: Token not allowed after unary operator: '-size-11' (3580,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (3590,17): run-time error CSS1039: Token not allowed after unary operator: '-red-color' (3591,21): run-time error CSS1039: Token not allowed after unary operator: '-size-11' (3592,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (3602,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (3603,17): run-time error CSS1039: Token not allowed after unary operator: '-point-color' (3607,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (3608,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (3626,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (3675,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (3739,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (3740,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (3759,21): run-time error CSS1039: Token not allowed after unary operator: '-size-13' (3760,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (3764,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (3770,17): run-time error CSS1039: Token not allowed after unary operator: '-red-color' (3774,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (3798,21): run-time error CSS1039: Token not allowed after unary operator: '-size-13' (3799,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (3803,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (3875,21): run-time error CSS1039: Token not allowed after unary operator: '-size-13' (3930,21): run-time error CSS1039: Token not allowed after unary operator: '-size-13' (3931,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-semibold' (3935,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (4027,21): run-time error CSS1039: Token not allowed after unary operator: '-size-15' (4028,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (4067,17): run-time error CSS1039: Token not allowed after unary operator: '-point-color' (4068,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (4092,17): run-time error CSS1039: Token not allowed after unary operator: '-red-color' (4117,17): run-time error CSS1039: Token not allowed after unary operator: '-basic-color' (4121,17): run-time error CSS1039: Token not allowed after unary operator: '-point-color' (4122,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (4132,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (4138,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (4139,17): run-time error CSS1039: Token not allowed after unary operator: '-point-color' (4154,17): run-time error CSS1039: Token not allowed after unary operator: '-basic-color' (4160,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (4166,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (4227,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (4228,17): run-time error CSS1039: Token not allowed after unary operator: '-point-color' (4263,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (4264,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (4268,17): run-time error CSS1039: Token not allowed after unary operator: '-basic-color' (4280,17): run-time error CSS1039: Token not allowed after unary operator: '-basic-color' (4345,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (4346,17): run-time error CSS1039: Token not allowed after unary operator: '-point-color' (4381,17): run-time error CSS1039: Token not allowed after unary operator: '-point-color' (4388,17): run-time error CSS1039: Token not allowed after unary operator: '-red-color' (4421,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (4434,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (4500,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (4521,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (4526,28): run-time error CSS1039: Token not allowed after unary operator: '-point-color' (4551,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (4552,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (4577,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (4578,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (4689,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' (4699,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (4700,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (4719,17): run-time error CSS1039: Token not allowed after unary operator: '-basic-color' (4820,21): run-time error CSS1039: Token not allowed after unary operator: '-size-20' (4821,23): run-time error CSS1039: Token not allowed after unary operator: '-weight-bold' (4826,21): run-time error CSS1039: Token not allowed after unary operator: '-size-12' (4827,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-color' (5100,21): run-time error CSS1039: Token not allowed after unary operator: '-size-14' */ @import "reset.css"; :root { --basic-color: #1A1A1A; --gray-color: #808080; --point-color: #0B29B7; --red-color: #980A16; --purple-color: #790A9B; --bg-color: #F2F3F4; --size-11: 0.6875em; --size-12: 0.75em; --size-13: 0.8125em; --size-14: 0.875em; --size-15: 0.9375em; --size-16: 1em; --size-18: 1.125em; --size-20: 1.25em; --weight-light: 300; --weight-semibold: 500; --weight-bold: 600; } .wrap { height: 100%; padding-top: constant(safe-area-inset-top); /* 아이폰노치대응 */ padding-right: constant(safe-area-inset-right); padding-bottom: calc(constant(safe-area-inset-bottom) + 52px); padding-left: constant(safe-area-inset-left); padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); padding-bottom: calc(env(safe-area-inset-bottom) + 52px); padding-left: env(safe-area-inset-left); } /* splash */ .splash { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(#0038CF, #6F5FFF); } .splash img { aspect-ratio: 1/1; } /* login */ .intro_title { background: linear-gradient(to right, #6F5FFF, #0F43CF); box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.14); display: flex; justify-content: center; border-radius: 0 0 16px 16px; min-height: 256px; } .intro_title h1 { color: #fff; display: flex; flex-direction: column; align-items: center; padding-top: 35px; } .intro_title h1>.welcome { font-size: 1.75em; font-weight: var(--weight-bold); padding: 5px 0 10px; } .intro_title h1>.text01 { font-size: var(--size-12); font-weight: var(--weight-bold) } .intro_title h1>.text02 { font-size: var(--size-14); font-weight: var(--weight-light); text-align: center; } .login_section { background: #fff; border-radius: 16px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.12); display: flex; justify-content: center; margin: -81px 1.25em 30px; padding: 40px 1.88em; } .form_wrap { width: 100%; } .login_area .select_group .ui-selectmenu-button { background: #f5f5f5; border: 0; border-radius: 10px; width: 100%; padding: 20px 15px; height: 60px; } .login_area .input_txt { background: #f5f5f5; border: none; border-radius: 10px; width: 100%; padding: 20px 15px; height: 60px; } .login_area .input_group { margin-top: 8px; } .login_area input::placeholder { color: var(--gray-color); } .login_area .btn_hiddenPW { top: 18px; } .btn_login { width: 100%; min-height: 60px; margin-top: 8px; height: 60px; } .login_area .autoLogin { justify-content: flex-end; margin: 12px 0 25px; } .btn_searchInfo { display: block; width: 100%; border: 1px solid #B3BCE4; border-radius: 10px; padding: 12px 0; min-height: 46px; text-align: center; font-size: var(--size-14); } .info_join { background: #E9EBF3 url(/Images/join_logo.png) 30px center no-repeat; background-size: 43.43px auto; border-radius: 16px; margin: 0 1.25em; padding: 24px 24px 24px 85px; } .info_join a h2 { font-size: 1em; font-weight: 600; padding-bottom: 5px; } .info_join a p { font-size: 0.875em; color: var(--gray-color); } /* button style */ .btn_basic { background: linear-gradient(#2C4CE3, #0B29B7); border-radius: 10px; font-size: var(--size-16); font-weight: var(--weight-bold); color: #fff; height: 50px; } .btn_darkgray { background: linear-gradient(#909396, #85878A); } .btn_lightblue { background: linear-gradient(#88B4F6, #6EA2EF); } .btn_small { border-radius: 6px; font-size: 12px; font-weight: var(--weight-semibold); color: #fff; height: 26px; padding: 0 10px; word-break: keep-all; } .btn_blue { background: #4865ED; } .btn_gray { background: #9AA3AE; } .copy_group { position: relative; } .btn_copy { background: url(/Images/icon_copy.png) 0 0 no-repeat; background-size: 100%; width: 18px; height: 18px; position: absolute; } .btn_popup_basic { background: linear-gradient(#3A3A3A, #191919); border-radius: 50px; font-size: var(--size-14); font-weight: var(--weight-bold); color: #fff; width: 100%; height: 46px; } .btn_popup_gray { background: linear-gradient(#959595, #878787); } /* input :: common */ input::placeholder { color: #A3A5AC; } textarea::placeholder { color: #A3A5AC; } textarea { width: 100%; padding: 1.25em 0.94em; background: #fff; border: 1px solid #ADB5BD; border-radius: 10px; } .input_group.hiddenPW { /* 비밀번호보기 */ position: relative; } .btn_hiddenPW { display: block; background: url(/Images/icon_hiddenPW_off.png) 0 0 no-repeat; background-size: 100%; width: 24px; height: 24px; position: absolute; top: 13px; right: 14px; cursor: pointer; } .btn_hiddenPW.on { background: url(/Images/icon_hiddenPW_on.png) 0 0 no-repeat; background-size: 100%; } input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="email"] { background: #fff; border: 1px solid #ADB5BD; border-radius: 10px; padding: 0.75em; width: 100%; height: 50px; } input[type="text"]:disabled, input[type="password"]:disabled, input[type="search"]:disabled, input[type="number"]:disabled, input[type="tel"]:disabled, input[type="email"]:disabled{ background: #F5F5F5; color: #A3A5AC; } input[type="text"]:read-only, input[type="password"]:read-only, input[type="search"]:read-only, input[type="number"]:read-only, input[type="tel"]:read-only, input[type="email"]:read-only{ background: #F5F5F5; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; -webkit-transition: background-color 9999s ease-out; -webkit-box-shadow: 0 0 0px 1000px white inset !important; /* -webkit-text-fill-color: #fff !important; */ } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } /* input group */ .input_group { display: flex; flex-direction: column; gap: 5px; } .input_group label, .select_group label { font-size: 14px; font-weight: var(--weight-bold); } .input_group.horizon { display: flex; flex-direction: row; align-items: center; } .input_group.horizon label { flex: 1 1 55%; font-size: var(--size-14); font-weight: var(--weight-bold); } .input_group.checkbox { display: flex; flex-direction: row; } .input_txt.price { text-align: right; font-weight: var(--weight-bold); } /* input :: calendar */ .cal_group { width: 100%; display: flex; justify-content: space-between; align-items: center; } .cal_group input.input_cal { width: 47.7%; } .cal_group.full_width input.input_cal { width: 100%; } input.input_cal { background: #fff url(/Images/icon_calendar.png) center right 10px no-repeat; background-size: 24px; font-size: var(--size-14); } /* input :: radio */ input[type="radio"] { display: none; } input[type="radio"]+label { position: relative; padding-left: 28px; font-size: 0.875em; cursor: pointer; min-height: 20px; } input[type="radio"]+label::after { content: ''; display: inline-block; width: 20px; height: 20px; background: #fff; border: 1px solid #CFD1D2; border-radius: 50px; position: absolute; top: 0; left: 0; } input[type="radio"]:checked+label::before { content: ''; display: inline-block; background: #fff; border: 0; border-radius: 50px; width: 6px; height: 6px; position: absolute; top: 7px; left: 7px; z-index: 1; } input[type="radio"]:checked+label::after { content: ''; display: inline-block; background: #0B29B7; background-size: 100%; border: 0; border-radius: 50px; width: 20px; height: 20px; position: absolute; top: 0; left: 0; } input[type="radio"].read_only+label::after { background: #E0E0E0; border: none; } input[type="radio"]:disabled+label::after { background: #E0E0E0; border: 1px solid #CFD1D2; } input[type="radio"]:checked:disabled+label::after { background: #E0E0E0; border: 0; } input[type="radio"]:checked:disabled+label::before { background: #A7ACAE; } input[type="radio"]:disabled+label { color: var(--gray-color); } /* input :: checkbox */ input[type="checkbox"] { display: none; } input[type="checkbox"]+label { position: relative; padding-left: 28px; font-size: 14px; cursor: pointer; min-height: 20px; } input[type="checkbox"]+label::after { content: ''; display: inline-block; width: 20px; height: 20px; background: #fff; border: 1px solid #CFD1D2; border-radius: 6px; position: absolute; top: 0; left: 0; } input[type="checkbox"]:checked+label::after { content: ''; display: inline-block; background: #0B29B7 url(/Images/icon_chk_checked.png) center center no-repeat; background-size: 100%; border: 0; border-radius: 6px; width: 20px; height: 20px; position: absolute; top: 0; left: 0; } input[type="checkbox"].read_only+label::after { background: #E0E0E0 url(/Images/icon_chk_readonly.png) center center no-repeat; background-size: 100%; border: none; } input[type="checkbox"]:disabled+label::after { background: #E0E0E0; border: 1px solid #CFD1D2; } input[type="checkbox"]:checked:disabled+label::after { background: #E0E0E0 url(/Images/icon_chk_readonly.png) center center no-repeat; background-size: 100%; border: 0; } input[type="checkbox"]:disabled+label { color: var(--gray-color); } /* input :: checkbox :: switch */ .switch label { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; } .switch input[type="checkbox"] { display: block; appearance: none; background: #fff; border: 1px solid #CFD1D2; border-radius: 1.25em; width: 42px; height: 24px; position: relative; } .switch input[type="checkbox"]::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: #A7ACAE; transition: left 250ms linear; position: absolute; top: 2px; left: 3px; } .switch input[type="checkbox"]:checked { background: #0B29B7; border: 1px solid #0B29B7; } .switch input[type="checkbox"]:checked::before { background: #fff; left: 20px; } .switch input[type="checkbox"]:disabled { background: #A7ACAE; borde: 1px solid #A7ACAE; cursor: not-allowed; } .switch input[type="checkbox"]:disabled:before { background: #E0E0E0; } /* select */ .select_group { width: 100%; } select { appearance: base-select; } .ui-selectmenu-button.ui-button { background: #fff; border: 1px solid #ADB5BD; border-radius: 10px; height: 50px; padding: 0.94em; width: 100%; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; } /* jquery UI selectmenu */ .ui-selectmenu-button, .ui-button:hover, .ui-button:focus { color: inherit; margin-right: 0; } .ui-selectmenu-button.ui-selectmenu-button-closed .ui-selectmenu-icon { background-image: url(/Images/icon_arrow_select_down.png); background-position: 0 center; } .ui-selectmenu-button.ui-selectmenu-button-open .ui-selectmenu-icon { background-image: url(/Images/icon_arrow_select_up.png); background-position: 0 center; } .ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper { padding: 12px 1em 12px .4em; font-size: var(--size-14); } .ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper.ui-state-active { background: #4865ED; } .ui-selectmenu-menu .ui-menu { border: 1px solid #ADB5BD; border-radius: 10px; } .ui-selectmenu-open { z-index: 102; } /* datepicker */ .ui-datepicker { width: 92%; border: 1px solid #ADB5BD; border-radius: 8px; padding: .2em; } .ui-datepicker .ui-datepicker-header { background: #F2F3F4; border: none; padding: .4em 0; } .ui-datepicker .ui-state-default { border: none; background: transparent; padding: 1em .2em; } .ui-datepicker td span, .ui-datepicker td a { text-align: center; border-radius: 5px; } .ui-datepicker-today .ui-state-default { color: #fff; font-weight: bold; background: #A6C6F6; } .ui-datepicker .ui-state-default.ui-state-active { color: #fff; font-weight: bold; background: #C8B3E4; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { top: 50%; transform: translate(0px, -50%); } .ui-datepicker-next.ui-datepicker-next-hover.ui-state-hover { border: none; background: none; } .ui-datepicker-prev .ui-icon { background: url(/Images/icon_arrow_select_down.png) center center no-repeat; background-size: 14px; transform: rotate(90deg); } .ui-datepicker-next .ui-icon { background: url(/Images/icon_arrow_select_down.png) center center no-repeat; background-size: 14px; transform: rotate(-90deg); } .ui-datepicker .ui-datepicker-title select { background: #fff; border: 0; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 30%; font-weight: normal; } .ui-datepicker select.ui-datepicker-year { margin-right: 3px; } .ui-datepicker select.ui-datepicker-month { margin-left: 15px; } .month-picker .ui-datepicker-calendar { display: none !important; } .month-picker .ui-widget-content { border: 0; } .month-picker .ui-datepicker-buttonpane { margin: 0; padding: 0; } .month-picker .ui-datepicker-buttonpane button:first-child { display: none; } .month-picker .ui-datepicker-buttonpane button.ui-datepicker-close { background: #4865ED; color: #fff; font-size: 14px; border-radius: 6px; padding: .6em; margin: .3em 0 0; width: 100%; } /* contents ***************************************************************************************************/ /* 모달팝업 */ .modal_wrap { background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 100; display: none; } .popup_wrap { width: 100%; min-height: 230px; background: #fff; border-radius: 20px; margin: 1.25em; display: flex; flex-direction: column; justify-content: center; } .popup_contents { display: flex; flex-direction: column; justify-content: space-between; width: 100%; background: url(/Images/icon_popup_info.png) top 40px center no-repeat; background-size: 52px; padding: 98px 20px 20px 20px; } .popup_contents p { text-align: center; } .popup_contents p>strong { font-size: var(--size-20); font-weight: var(--weight-bold); display: block; padding-bottom: 5px; } .popup_footer { display: flex; gap: 5px; margin: 0 20px 20px; } /* 바텀시트 */ .modal_bottomSheet_wrap { background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: flex-end; position: fixed; inset: 0; z-index: 101; display: none; } .modal_bottomSheet_wrap.show { display: flex; } .bottomSheet_wrap { width: 100%; background: #F2F3F4; border-radius: 16px 16px 0 0; transform: translateY(100%); transition: transform 0.3s ease, opacity 0.3s ease; opacity: 0; min-height: 50%; position: relative; } .bottomSheet_wrap.show { transform: translateY(0); opacity: 1; } .not_scroll { /* 부모창 스크롤 방지 */ position: fixed; overflow: hidden; width: 100%; height: 100% } .bottomSheet_wrap .header { background: #fff; border-radius: 16px 16px 0 0; display: flex; justify-content: center; align-items: center; height: 54px; position: sticky; top: 0; z-index: 1; } .bottomSheet_wrap .header h1 { font-weight: var(--weight-bold); } .bottomSheet_wrap .header .btn_bottomSheet_close { background: url(/Images/icon_close.png) center center no-repeat; background-size: 24px; width: 24px; height: 24px; position: absolute; top: 50%; right: 20px; transform: translate(0, -50%); } .bottomSheet_wrap .contents_wrap { padding: 1.25em; } .bottomSheet_wrap .list_item { padding: 0.94em; } .bottomSheet_wrap .list .info_area { padding: 0; } .bottomSheet_wrap .list .bottom_group { justify-content: flex-start; } .bottomSheet_wrap .footer { position: absolute; left: 20px; right: 20px; bottom: 20px; } .bottomSheet_wrap .footer .btn_area{ display: flex; gap: 7px; } .bottomSheet_wrap .footer button { width: 100%; } /* 바텀시트 :: 홈 공지사항 */ .bottomSheet_wrap.news_popup { background: #E7EFFF; min-height: 250px; position: relative; } .bottomSheet_wrap.news_popup .btn_bottomSheet_close { background: url(/Images/icon_close_white.png) center center no-repeat; background-size: 24px; } .bottomSheet_wrap.news_popup .header { background: transparent; width: 100%; height: 40px; position: absolute; top: -40px; } .bottomSheet_wrap.news_popup .content { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; height: 195px; } .bottomSheet_wrap.news_popup .content.news { font-size: var(--size-20); font-weight: var(--weight-bold); } .bottomSheet_wrap.news_popup .contents_wrap::before { content: ''; display: block; width: 80px; height: 80px; border-radius: 50px; background: #E7EFFF url(/Images/icon_news01.png) center center no-repeat; background-size: 50px; position: absolute; top: -15px; left: 50%; transform: translate(-50%, 0); } .bottomSheet_wrap.news_popup .content.survey h1 { font-size: var(--size-20); font-weight: var(--weight-bold); padding-bottom: 5px; } .bottomSheet_wrap.news_popup .content.survey p { font-size: var(--size-13); font-weight: var(--weight-bold); } .bottomSheet_wrap.news_popup .content.survey p>span { font-weight: var(--weight-semibold); color: var(--gray-color); } .bottomSheet_wrap.news_popup .btn_survey { background: #4865ED; border-radius: 50px; color: #fff; font-size: var(--size-14); font-weight: var(--weight-bold); padding: 10px 30px; margin-top: 12px; width: 50%; } .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal { position: absolute; top: -30px; left: 15px; width: auto; } .swiper-pagination-bullet { width: 12px; height: 12px; background: #ADB5BD; opacity: 1; } .swiper-pagination-bullet-active { background: #0B29B7; } .bottomSheet_wrap.news_popup .footer { display: flex; justify-content: space-between; font-size: var(--size-14); color: var(--gray-color); } /* 바텀시트 :: SMS발신 */ .bottomSheet_wrap.sms_popup { height: 90%; } .bottomSheet_wrap.sms_popup .contents_wrap { height: calc(100% - 150px); overflow-y: auto; } .sms_popup .user { padding: 17px 15px; font-size: var(--size-14); background: #fff; border: 1px solid #5E82F1; border-radius: 16px 16px 0 16px; position: absolute; right: 20px; } .sms_popup .user p { background: url(/Images/icon_sms_user.png) left center no-repeat; background-size: 24px; padding-left: 34px; line-height: 24px; } .talk_list { display: flex; flex-direction: column; gap: 20px; /* overflow-y: auto; height: 480px; */ margin-top: 80px; } .talk_list li { display: flex; } .talk_list li.right { flex-direction: row-reverse; align-items: flex-end; } .talk_list li.left { flex-direction: row; justify-content: flex-start; } .talk_list li p { padding: 20px 15px; font-size: var(--size-14); } .talk_list li.right p { background: #5E82F1; border-radius: 16px 16px 0 16px; color: #fff; max-width: 80%; min-width: 20%; } .talk_list li.left p { background: #E6E8EE; border-radius: 16px 16px 16px 0; } .talk_list li.left.success { color: var(--point-color); } .talk_list li.left.fail { color: var(--red-color); } .talk_list .btn_more_list { color: var(--point-color); font-size: var(--size-12); text-align: center; background: #E6E8EE; border-radius: 8px; display: block; width: 100%; padding: 10px 0; } .talk_list .btn_more_list span { background: url(/Images/icon_card_plus.png) right center no-repeat; background-size: 14px; padding-right: 20px; } .send { background: #fff; border: 1px solid #ADB5BD; border-radius: 50px; display: flex; justify-content: space-between; align-items: center; height: 56px; padding: 6px 6px 6px 20px; } .send .sms_text { border: 0; padding: 0; border-radius: 0; font-size: var(--size-14); width: 72%; height: 100%; } .send .sms_text:focus { border: 0; } .bottomSheet_wrap .footer button.btn_send { background: url(/Images/icon_sms_send.png) center center no-repeat, linear-gradient(#2C4CE3, #0B29B7); background-size: 24px; border-radius: 50px; width: 46px; height: 46px; } .talk_list li time { font-size: var(--size-12); color: var(--gray-color); text-align: right; width: 60px; margin-right: 5px; } /* 타이틀영역 & 메뉴명 */ .title_wrap { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 0.94em; background: #fff; position: sticky; top: 0; z-index: 2; } .title_wrap.hidden { top: -44px; } .title_area { display: flex; } .title_area .go_back { background: url(/Images/icon_back_black.png)center center no-repeat; background-size: 100%; width: 24px; height: 24px; margin-right: 12px; } .title_area .go_home { background: url(/Images/icon_home.png)center center no-repeat; background-size: 100%; width: 24px; height: 24px; margin-right: 12px; } .title_area h1 { font-size: 1.125em; font-weight: var(--weight-bold); } .title_wrap .btn_area { display: flex; align-items: center; } .title_wrap .btn_area a { display: block; width: 24px; height: 24px; margin-left: 10px; position: relative; } .title_wrap .btn_shopping_bag { background: url(/Images/icon_shopping_bag.png)center center no-repeat; background-size: 100%; } .title_wrap .btn_menu { background: url(/Images/icon_menu.png)center center no-repeat; background-size: 100%; } .title_wrap .btn_close { background: url(/Images/icon_close.png)center center no-repeat; background-size: 100%; } .title_wrap .btn_shopping_bag em.shopping_count { display: flex; justify-content: center; align-items: center; background: #4865ED; border-radius: 50%; height: 18px; min-width: 18px; position: absolute; top: -5px; right: -8px; } .title_wrap .btn_shopping_bag em.shopping_count>.num { color: #fff; font-size: 0.6875em; } /* 서브메뉴 */ .submenu_wrap { background: linear-gradient(to right, #6F5FFF, #0F43CF); min-height: 48px; position: sticky; top: 0; z-index: 2; } .submenu_wrap ul { display: flex; overflow-x: auto; margin: 0 20px; } .submenu_wrap li { flex: 0 0 auto; position: relative; margin-left: 20px; } .submenu_wrap li:first-child { margin-left: 0; } .submenu_wrap ul li a { font-size: var(--size-15); font-weight: var(--weight-semibold); color: #B3BCE4; display: block; height: 48px; padding-top: 13px; white-space: nowrap; } .submenu_wrap li.active a { font-weight: var(--weight-bold); color: #fff; } .submenu_wrap ul li.active::after { content: ''; display: inline-block; width: 100%; height: 3px; background: #fff; position: absolute; bottom: 1px; } /* 하단버튼영역 */ .btn_wrap { width: 100%; padding: 0 15px; position: fixed; bottom: 20px; } .btn_wrap button { width: 100%; height: 50px; } /* 위로버튼 */ .btn_top { display: none; border-radius: 50px; background: #A6C6F6 url(/Images/icon_up.png) center center no-repeat; background-size: 22px; width: 42px; height: 42px; position: fixed; bottom: 67px; right: 15px; z-index: 50; } .btn_top.hidden { bottom: -67px; } /* 하단고정메뉴 */ nav.bottom_menu { position: fixed; bottom: 0; z-index: 100; width: 100%; height: 52px; background: #fff; box-shadow: 0 -7px 16px rgba(0, 0, 0, 0.07); } nav.bottom_menu ul { display: flex; flex-wrap: wrap; } nav.bottom_menu ul li { font-size: 0.625em; font-weight: var(--weight-semibold); flex: 1 1 20%; display: flex; justify-content: center; } nav.bottom_menu ul li a { display: block; width: 100%; height: 52px; text-align: center; padding-top: 32px; } nav.bottom_menu ul li a.active { color: #0B29B7; } nav.bottom_menu .menu_barcode { width: 59px; height: 59px; border: 5px solid #fff; border-radius: 50px; background: #B0B8C1 url(/Images/icon_barcode.png) center center no-repeat; background-size: 22px 18px; position: relative; top: -10px; } nav.bottom_menu .menu_barcode.active { background: url(/Images/icon_barcode.png) center center no-repeat, linear-gradient(to right, #6F5FFF, #0F43CF); background-size: 22px 18px, 100%; } nav.bottom_menu .menu_home { background: url(/Images/menu01.png) center top 6px no-repeat; background-size: 24px 24px; } nav.bottom_menu .menu_home.active { background: url(/Images/menu01_active.png) center top 6px no-repeat; background-size: 24px 24px; } nav.bottom_menu .menu_order { background: url(/Images/menu02.png) center top 6px no-repeat; background-size: 24px 24px; } nav.bottom_menu .menu_order.active { background: url(/Images/menu02_active.png) center top 6px no-repeat; background-size: 24px 24px; } nav.bottom_menu .menu_lowerPrice { background: url(/Images/menu03.png) center top 6px no-repeat; background-size: 24px 24px; } nav.bottom_menu .menu_lowerPrice.active { background: url(/Images/menu03_active.png) center top 6px no-repeat; background-size: 24px 24px; } nav.bottom_menu .menu_return { background: url(/Images/menu04.png) center top 6px no-repeat; background-size: 24px 24px; } nav.bottom_menu .menu_return.active { background: url(/Images/menu04_active.png) center top 6px no-repeat; background-size: 24px 24px; } nav.bottom_menu .menu_pay { background: url(/Images/menu05.png) center top 6px no-repeat; background-size: 24px 24px; } nav.bottom_menu .menu_pay.active { background: url(/Images/menu05_active.png) center top 6px no-repeat; background-size: 24px 24px; } /* 하단고정메뉴 - 불량제품 선택 시 */ .bottom_menu_defectivePro{ position: fixed; bottom: 52px; z-index: 100; width: 100%; height: 46px; background: linear-gradient(to right, #6F5FFF, #0F43CF); border-radius: 20px 20px 0 0; display: flex; justify-content: center; } .bottom_menu_defectivePro .input_group{ color: #fff; padding: 9px 18px 0 0; } .bottom_menu_defectivePro input[type="checkbox"]+label::after { background: #E0E0E0 url(/Images/icon_chk_checked.png) center center no-repeat; background-size: 100%; border: 0; border-radius: 50px; } .bottom_menu_defectivePro input[type="checkbox"]:checked+label::after { background: #0B29B7 url(/Images/icon_chk_checked.png) center center no-repeat; background-size: 100%; } .bottom_menu_defectivePro .input_group label { font-weight: var(--weight-semibold); } /* 오픈메뉴 */ .menu_wrap { width: 100%; height: 100%; overflow-y: auto; background: #F2F3F4; z-index: 1001; position: fixed; top: 0; right: -100%; transition: all 0.35s; } .menu_wrap.open { right: 0; } .menu_wrap .title_wrap { background: linear-gradient(to right, #6F5FFF, #0F43CF); min-height: 54px; border-radius: 10px; margin: 15px; top: 0.94em; } .menu_wrap .title_wrap::after{ content: ''; display: block; background: #F2F3F4; width: 100%; height: 15px; position: absolute; top: -15px; left: 0; } .menu_wrap .title_wrap h1 { color: #fff; } .menu_wrap .title_wrap .btn_close { background: url(/Images/icon_close_white.png) center center no-repeat; background-size: 24px; } .menu_wrap .user_info { background: #E7EFFF; border: 1px solid #e0e4f6; border-radius: 16px; margin: 0 15px 15px; padding: 19px 15px; flex-direction: column; align-items: flex-start; } .menu_wrap main { min-height: 581px; } .menu_wrap .user_info ul { display: flex; justify-content: space-around; width: 100%; padding-top: 10px; } .menu_wrap .user_info ul li a { display: block; width: 30px; height: 30px; } .menu_wrap .user_info .menu_notice { background: url(/Images/icon_notice.png) center center no-repeat; background-size: 30px 30px; } .menu_wrap .user_info .menu_user { background: url(/Images/icon_user.png) center center no-repeat; background-size: 30px 30px; } .menu_wrap .user_info .menu_setting { background: url(/Images/icon_setting.png) center center no-repeat; background-size: 30px 30px; } .menu_wrap .user_info .menu_logout { background: url(/Images/icon_logout.png) center center no-repeat; background-size: 30px 30px; } section.menu { background: #fff; border: 1px solid #E9EBF3; border-radius: 16px; margin: 0 15px 15px; } section.menu ul { display: flex; flex-wrap: wrap; gap: 0.94em 0; border-top: 1px solid #E9EBF3; } section.menu ul li { flex: 1 1 40%; } section.menu ul li a { color: var(--basic-color); font-weight: var(--weight-semibold); } /* jquery UI accordion */ .ui-widget { font-family: inherit; font-size: inherit; } .ui-accordion .ui-accordion-header { background: #fff; border: none; border-radius: 16px 16px 0 0; color: var(--basic-color); font-size: var(--size-20); font-weight: var(--weight-bold); margin: 0; padding: 0.925em 1em; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; } .ui-accordion .ui-accordion-header.ui-accordion-header-collapsed { border-radius: 16px; } .ui-accordion-header .ui-accordion-header-icon { background: url(/Images/icon_arrow_acco_down.png) center center no-repeat; background-size: 14px 14px; } .ui-accordion-header-active .ui-accordion-header-icon { background: url(/Images/icon_arrow_acco_up.png) center center no-repeat; background-size: 14px 14px; } .ui-accordion .ui-accordion-content { background: #fff; border: none; border-top: 1px solid #E9EBF3; padding: 0.94em 0 0 0; margin: 0 1.25em 1.25em 1.25em; color: var(var(--basic-color)) } footer { background: #fff; width: 100%; padding: 1.75em 1.25em; margin-top: 1.25em; } footer ul { display: flex; } footer ul li a { font-size: var(--size-14); } footer ul li a.menu_private { font-weight: var(--weight-bold); padding-left: 24px; } footer address { font-size: var(--size-12); font-weight: var(--weight-bold); color: var(--gray-color); padding: 12px 0 3px; } footer p { font-size: var(--size-12); font-weight: var(--weight-semibold); color: var(--gray-color); } /* 회원가입안내 */ .login .contents_wrap { padding: 10px 0.94em 48px; min-height: calc(100vh - 114px); position: relative; } .membership_desc { background: linear-gradient(to right, #6F5FFF, #0F43CF); box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.14); border-radius: 16px; color: #fff; padding: 37px 1.25em; position: relative; } .membership_desc::before { content: url(/Images/bg_logo.png); display: block; width: 173px; position: absolute; top: 0; right: 0; } .membership_desc .text01 { font-size: var(--size-12); font-weight: var(--weight-bold); } .membership_desc .text02 { font-size: 1.125em; font-weight: var(--weight-bold); padding: 4px 0 8px; } .membership_desc .text03 { font-size: 0.8750em; font-weight: var(--weight-light); } .membership_join_info section h2 { font-size: var(--size-16); font-weight: var(--weight-bold); line-height: 24px; padding-left: 28px; margin-bottom: 12px; position: relative; } .membership_join_info section h2::before { content: ''; display: block; width: 24px; height: 24px; position: absolute; left: 0; top: -1px; } .membership_join_info section.membership_function h2::before { background: url(/Images/icon_membership01.png) center center no-repeat; background-size: 100%; } .membership_join_info section.membership_guide h2::before { background: url(/Images/icon_membership02.png) center center no-repeat; background-size: 100%; } .membership_join { margin-top: 30px; } .membership_join li { font-size: var(--size-14); color: var(--gray-color); padding: 5px 0 5px 28px; position: relative; } .membership_join li::before { content: ''; display: block; width: 4px; height: 4px; background: var(--gray-color); position: absolute; top: 13px; left: 10px; } /* 문의하기 */ .company { background: linear-gradient(to right, #6F5FFF, #0F43CF); box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.14); border-radius: 16px; margin-bottom: 20px; padding: 15px 1.25em; } .company p { font-size: var(--size-18); font-weight: var(--weight-bold); color: #fff; } .department { display: flex; flex-wrap: wrap; gap: 10px; } .department li { flex: 1 1 40%; background: #fff; border: 1px solid #E9EBF3; border-radius: 16px; padding: 22px 10px 22px 20px; } .department h2 { font-weight: var(--weight-bold); padding-bottom: 8px; } .department p { font-size: var(--size-14); padding-left: 25px; line-height: 22px; margin-top: 4px; } .department p.phone { background: url(/Images/icon_phone.png) left top no-repeat; background-size: 22px; } .department p.fax { background: url(/Images/icon_fax.png) left top no-repeat; background-size: 22px; } /* 아이디/비밀번호찾기 */ .findID .contents_wrap { min-height: calc(100vh - 114px); } .info_reg { display: flex; flex-direction: column; gap: 10px; } .result ul li { display: flex; flex-direction: column; gap: 6px; } .result ul li.border_bottom { margin-top: 40px; } .result .complete { align-self: center; } .result .complete p { font-weight: var(--weight-bold); text-align: center; } .result .complete .text01 { font-size: var(--size-20); background: url(/Images/icon_complete_findID.png) center top no-repeat; background-size: 53px; padding: 53px 0 8px; } .result .complete .text02 { font-size: var(--size-14); } .result .complete .text02 strong { color: var(--point-color); } .result .item_group { display: flex; justify-content: space-between; } .result .item_group .value { font-weight: var(--weight-bold); } .result .btn_copy { top: 2px; left: -25px; } .btn_go_login { margin-top: 20px; } .findPW .info { /* position: absolute; bottom: 30px; left: 15px; right: 15px; */ margin-top: 20px; } .phone_group { display: flex; flex-direction: initial; justify-content: space-around; gap: initial; } .phone_group input.input_txt { border-right: 0; border-radius: 10px 0 0 10px; } .phone_group .btn_verification { background: linear-gradient(#3A3A3A, #191919); border-radius: 0 10px 10px 0; font-size: var(--size-14); font-weight: var(--weight-bold); color: #fff; flex-basis: 54%; } .verification_group { font-size: var(--size-14); color: var(--red-color); position: relative; } .verification_group time { position: absolute; top: 15px; right: 15px; } .safe_password { margin-top: 30px; } .safe_password h2 { font-size: var(--size-16); font-weight: var(--weight-bold); line-height: 24px; padding-left: 28px; margin-bottom: 12px; position: relative; } .safe_password h2::before { content: ''; display: block; width: 24px; height: 24px; position: absolute; left: 0; top: -1px; } .safe_password h2::before { background: url(/Images/icon_safe_password.png) center center no-repeat; background-size: 100%; } .safe_password li { font-size: var(--size-14); color: var(--gray-color); padding: 5px 0 5px 28px; position: relative; } .safe_password li::before { content: ''; display: block; width: 4px; height: 4px; background: var(--gray-color); position: absolute; top: 13px; left: 10px; } /* 홈 :: 메인 */ .home .title_wrap { background: linear-gradient(to right, #6F5FFF, #0F43CF); } .home .title_wrap h1 { color: #fff; } .home .title_wrap .btn_menu { background: url(/Images/icon_menu_white.png) center center no-repeat; background-size: 100%; } .user_info_wrap { background: linear-gradient(to right, #6F5FFF, #0F43CF); box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.14); justify-content: center; border-top: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0 0 16px 16px; padding: 20px; min-height: 159px; color: #fff; } .user_info { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; } .user_info .btn_copy { top: 2px; right: -24px; } .custom_alert { width: 70%; position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.7); color: #fff; padding: 12px 20px; border-radius: 8px; font-size: 16px; text-align: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); z-index: 1000; display: none; animation: fadeInOut 2s ease-in-out; } @keyframes fadeInOut { 0% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } .pharmacy_name { font-size: 1.25em; font-weight: var(--weight-bold); padding-bottom: 6px; } .pharmacy_name>span { font-size: 0.70em; font-weight: normal; } .account_number { font-size: var(--size-14); } .user_img { width: 62px; height: 62px; } .user_img img { width: 62px; height: 62px; border-radius: 50px; } .btn_sms { font-size: var(--size-14); color: #fff; width: 100%; background: transparent; border: 1px solid #B3BCE4; border-radius: 50px; padding: 7px; } .btn_sms>span { font-weight: var(--weight-bold); background: url(/Images/icon_sms.png) left center no-repeat; background-size: 24px 24px; padding: 0 6px 0 32px; } .btn_sms>em { font-weight: var(--weight-light); } .notice_wrap { margin: 20px 0.94em; } .notice_wrap h1 { font-size: var(--size-16); font-weight: var(--weight-bold); padding-bottom: 10px; display: flex; justify-content: space-between; align-items: center; } .notice_wrap .btn_all_view { font-size: var(--size-12); color: var(--gray-color); background: url(/Images/icon_arrow_view.png) right center no-repeat; background-size: 8px 16px; padding-right: 12px; } .notice_wrap ol { display: flex; flex-wrap: wrap; gap: 5px; } .notice_wrap ol li { flex: 1 1 40%; border-radius: 10px; padding: 1.25em; display: flex; flex-direction: column; justify-content: space-between; } .notice_wrap ol li:first-child { background: #E7EFFF; } .notice_wrap ol li:last-child { background: #E8E7FF; } .notice_wrap ol li a { font-size: var(--size-14); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap: break-word; } .notice_wrap ol li time { font-size: var(--size-12); color: var(--gray-color); display: inline-block; width: 100%; text-align: right; margin-top: 23px; } .link_wrap { margin: 0.94em; } .link_wrap a { font-size: var(--size-14); display: block; width: 100%; background: url(/Images/icon_file.png) 20px center no-repeat, url(/Images/icon_arrow_link.png) right 20px center no-repeat, #E9EBF3; background-size: 16px 16px, 18px 18px; border-radius: 10px; padding: 17px 20px 17px 38px; } .link_wrap a>strong { font-weight: var(--weight-bold); } .delivery_wrap { border: 1px solid #E9EBF3; border-radius: 10px; padding: 20px 13px; margin: 0.94em; } .delivery_info { display: flex; justify-content: center; align-items: center; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px dashed #E9EBF3; } .delivery_info h1 { width: 80px; height: 80px; background: #B3BCE4 url(/Images/icon_delivery.png) center 18px no-repeat; background-size: 24px 24px; border-radius: 50px; display: flex; justify-content: center; margin-right: 1.88em; } .delivery_info h1>span { font-size: var(--size-12); font-weight: var(--weight-bold); color: #fff; padding-top: 46px; } .order_info h2 { font-size: var(--size-12); } .order_info p { font-weight: var(--weight-bold); padding: 3px 0; } .order_info ul li { font-size: var(--size-12); color: var(--gray-color); padding-left: 12px; position: relative; } .order_info ul li::before { content: ''; display: inline-block; width: 4px; height: 4px; background: var(--gray-color); position: absolute; top: 6px; left: 0; } .deadline_info .deadline_time { border: 1px solid #B3BCE4; border-radius: 10px; text-align: center; padding: 15px 0 8px; font-size: var(--size-14); font-weight: 600; } .deadline h3 { font-size: var(--size-12); font-weight: var(--weight-bold); text-align: center; color: #fff; background: #B3BCE4; border-radius: 60px; padding: 2px; width: 50%; position: relative; top: 10px; left: 50%; transform: translate(-50%, 0); } .banner_wrap { margin: 0.94em; } /* 공지사항 */ .news search { background: #F2F3F4; } .news search .select_group { width: 95px; } .news search .input_txt { width: 53%; } .news .list_wrap { background: #Ffff; } .news .list_wrap li { display: flex; flex-direction: column; gap: 8px; margin-top: 40px; } .news .list_wrap li:first-child { margin-top: 0; } .news .list_wrap .news_title { font-weight: var(--weight-bold); background: url(/Images/Icon_go.png) right top no-repeat; background-size: 14px; padding-right: 34px; } .news time { font-size: var(--size-12); color: var(--gray-color); } .pagination{ display: flex; justify-content: center; align-items: center; gap: 20px; padding-top: 20px; } .pagination a{ display: block; width: 36px; height: 36px; border: 1px solid #ADB5BD; border-radius: 6px; } .pagination a.btn_list_prev{ background: url(/Images/icon_arrow_select_up.png) center center no-repeat; transform: rotate(-90deg); } .pagination a.btn_list_next{ background: url(/Images/icon_arrow_select_down.png) center center no-repeat; transform: rotate(-90deg); } .pagination span{ color: var(--gray-color); } .pagination span > strong{ color: var(--basic-color); font-weight: var(--weight-bold); } .notice_view { padding: 20px 0.94em; } .notice_view .news_title { border-bottom: 1px solid #EBECF0; padding-bottom: 30px; margin-bottom: 30px; } .notice_view .news_title p { font-size: var(--size-20); font-weight: var(--weight-bold); } .notice_view .content { min-height: 363px; } .notice_view .content p { padding-bottom: 20px; } .notice_view .attach_file { display: flex; flex-direction: column; gap: 6px; margin-top: 30px; } .notice_view .attach_file a { font-size: var(--size-12); border-radius: 10px; background: #F5F5F5 url(/Images/icon_attach.png) top 13px left 15px no-repeat; background-size: 18px; padding: 15px 15px 15px 43px; } /* 개인정보변경 */ .change_info .contents_wrap { padding: 10px 0.94em 110px; min-height: calc(100vh - 176px); position: relative; } .change_info .btn_wrap { bottom: 82px; } .password_check .desc { background: url(/Images/icon_password.png) center top no-repeat; background-size: 52px; padding: 60px 0 10px; font-size: var(--size-14); font-weight: var(--weight-bold); text-align: center; margin-top: 30px; } .password_check .info { position: absolute; left: 15px; right: 15px; bottom: 30px; } .profile { display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.12); border-radius: 16px; padding: 30px 20px 30px 30px; gap: 30px; margin-bottom: 20px; } .profile h2 { font-size: var(--size-14); font-weight: var(--weight-bold); } .profile p { font-size: var(--size-12); color: var(--gray-color); } .profile .btn_area { padding-top: 12px; } .profile .btn_area button { background: linear-gradient(#3A3A3A, #191919); border-radius: 50px; font-size: var(--size-11); font-weight: var(--weight-bold); color: #fff; padding: 6px 10px; margin-right: 10px; } .private_info .info_reg { gap: 20px; } .private_info .info_reg label { color: var(--gray-color); } .private_info .btn_hiddenPW { top: 37px; } .membership { margin-top: 20px; font-weight: var(--weight-bold); display: flex; flex-direction: column; gap: 20px; } .membership h2 { font-size: var(--size-18); } .membership .item_group { display: flex; } .membership .item_group .label { font-size: var(--size-14); color: var(--gray-color); flex-basis: 40%; padding-left: 25px; position: relative; } .membership .item_group .label::before { content: ''; display: block; width: 4px; height: 4px; background: var(--gray-color); position: absolute; top: 7px; left: 10px; } .membership .item_group .value { flex-basis: 60%; } /* 설정 */ .setting .contents_wrap { display: flex; flex-direction: column; gap: 15px; padding: 10px 0.94em 110px; } .setting .contents_wrap article { background: #EBECF0; border-radius: 16px; padding: 25px 20px; min-height: 80px; display: flex; justify-content: space-between; align-items: center; } .setting .contents_wrap article.version { background: #E7EFFF; } .setting .contents_wrap article.version p { font-size: var(--size-20); font-weight: var(--weight-bold); } .setting .contents_wrap article h2 { font-weight: var(--weight-bold); } /* 개인정보취급방침 */ .privacy .contents_wrap { display: flex; flex-direction: column; gap: 30px; padding: 10px 0.94em 30px; font-size: var(--size-14); line-height: 1.6; } .privacy .contents_wrap ul { display: flex; flex-direction: column; gap: 30px; } .privacy ol h2 { font-size: 16px; font-weight: var(--weight-bold); padding-bottom: 8px; } .privacy ol p { color: var(--gray-color); } .privacy .contents_wrap ul ul { display: flex; flex-direction: column; gap: 15px; } .privacy .contents_wrap ul p+ul { padding-top: 15px; } .privacy .contents_wrap ul ul h3 { font-weight: var(--weight-bold); } .privacy .charge { color: var(--basic-color); } .privacy .execute { font-size: 16px; font-weight: var(--weight-bold); } /* 설문조사 */ .survey .contents_wrap { padding-bottom: 80px; min-height: calc(100vh - 176px); position: relative; } .survey .btn_wrap { bottom: 82px; } .survey_desc { background: linear-gradient(to right, #6F5FFF, #0F43CF); box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.14); border-radius: 16px; font-size: var(--size-14); color: #fff; padding: 30px 1.25em; margin: 10px 0.94em 0.94em; position: relative; } .survey_desc p { padding-top: 15px; } .survey_desc p:first-child { padding-top: 0; } .survey_desc p strong { font-weight: var(--weight-bold); } .question_wrap { padding: 0.94em 0.94em 1.88em 0.94em; } .question_wrap p { font-weight: var(--weight-semibold); padding-left: 29px; padding-bottom: 0.94em; position: relative; } .question_wrap p::before { content: ''; display: block; width: 24px; height: 24px; background: url(/Images/icon_question.png) top left no-repeat; background-size: 24px; position: absolute; top: -2px; left: 0; } .question_wrap p.sub_question { padding-left: 0; } .question_wrap .sub_example:first-child p.sub_question { padding-top: 0; } .question_wrap .sub_example { padding-bottom: 20px; border-bottom: 1px dashed #ADB5BD; margin-bottom: 20px; } .question_wrap .sub_example:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } .question_wrap p.sub_question::before { content: none; } .question_wrap .example ul { display: flex; flex-wrap: wrap; gap: 5px; } .question_wrap .example li { flex: 1 1 40%; border: 1px solid #E9EBF3; padding: 12px 10px; } .question_wrap .example_rdo li { flex: 0 1 49%; } .survey .input_group.checkbox { overflow: hidden; gap: 0; } .survey .input_group.checkbox .input_txt { height: auto; border: 0; padding: 0; font-size: var(--size-14); } .survey .input_group.checkbox .input_txt::placeholder { font-size: var(--size-14); } .example input[type="checkbox"]+label::after { background: #E0E0E0 url(/Images/icon_chk_checked.png) center center no-repeat; background-size: 100%; border: 0; border-radius: 50px; } .example input[type="checkbox"]:checked+label::after { background: #0B29B7 url(/Images/icon_chk_checked.png) center center no-repeat; background-size: 100%; } .example .input_group label { font-weight: var(--weight-semibold); } /* 검색영역 */ search { padding: 1.25em 0.94em; } search form { display: flex; flex-direction: column; gap: 5px; } .horizon_group { display: flex; } search .horizon_group { align-items: center; gap: 3px; } search .horizon_group.btn_area { justify-content: space-between; } .horizon_group.btn_area input[type="search"], .horizon_group.btn_area input[type="text"] .horizon_group.btn_area .select_group, .horizon_group.btn_area .cal_group { width: 81.7%; } .horizon_group.btn_area .cal_group input.input_cal { width: 47.1%; } .horizon_group.full_width { width: 100%; } .bottom_group .horizon_group.full_width .item_group { width: 100%; align-items: flex-start; } .horizon_group.full_width .item_group .label { flex-basis: 65px; } .horizon_group.full_width .item_group .value { flex-basis: 100%; } .btn_search { background: url(/Images/icon_search.png) center center no-repeat, linear-gradient(#2C4CE3, #0B29B7); background-size: 24px 24px, 100%; border-radius: 10px; width: 60px; height: 50px; } .horizon_group .btn_date { background: #98BEF7; width: 100%; height: 40px; font-size: var(--size-14); } .select_group.select_label { position: relative; } .select_group.select_label label { font-size: 16px; position: absolute; top: 14px; left: 15px; z-index: 1; } .select_group.select_label label::after { content: ''; display: block; width: 1px; height: 100%; background: #E9EBF3; position: absolute; top: 0; right: -13px; } .select_group.select_label .ui-selectmenu-text { margin-left: 80px; } /* 목록영역 */ .list_wrap { background: #F2F3F4; padding: 1.56em 0.94em; min-height: calc(100vh - 237px); } .list_title { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; } .list_wrap .btn_area { display: flex; gap: 15px; } .list_wrap .btn_download { background: url(/Images/icon_download.png) left center no-repeat; background-size: 16px; padding-left: 19px; font-size: var(--size-13); } .list_wrap .btn_print { background: url(/Images/icon_print.png) left center no-repeat; background-size: 18px; padding-left: 21px; font-size: var(--size-13); } .list { display: flex; flex-direction: column; justify-content: center; } .total_wrap { width: 100%; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -7px 16px 0 rgba(0, 0, 0, 0.07); padding: 1.56em 1.88em; position: fixed; bottom: 52px; transform: translateY(100); transition: all 0.4s ease; z-index: 60; } .total_wrap.hidden { bottom: -52px; transform: translateY(0); transition: all 0.4s ease; } .total_wrap .total { font-size: var(--size-20); display: flex; justify-content: space-between; align-items: center; } .total_wrap .total h2 { font-size: 16px; } .total_wrap .total strong { font-weight: var(--weight-bold); color: var(--point-color); } .list_title h1 { font-size: var(--size-15); font-weight: var(--weight-bold); } .list_title .select_array .ui-selectmenu-text { font-size: 13px; } .list_title .select_array .ui-selectmenu-button.ui-button { width: 5.5em; height: auto; border: 0; background: transparent; padding: 2px 0; } .list_title .select_array .ui-selectmenu-button.ui-selectmenu-button-closed .ui-selectmenu-icon { background-image: url(/Images/icon_arrow_select_down_s.png); background-position: 0 center; background-size: 14px; } .list_title .select_array .ui-selectmenu-button.ui-selectmenu-button-open .ui-selectmenu-icon { background-image: url(/Images/icon_arrow_select_up_s.png); background-position: 0 center; background-size: 14px; } .list .no_data { color: var(--gray-color); padding-top: 60px; margin-top: 50px; background: url(/Images/icon_no_data.png) center top no-repeat; background-size: 40px; text-align: center; } .no_data { color: var(--gray-color); padding-top: 60px; background: url(/Images/icon_no_data.png) center top no-repeat; background-size: 40px; text-align: center; margin: 20px; } .list ul { width: 100%; } .list ul li { margin-top: 15px; } .list ul li:first-child { margin-top: 0; } .list_item { background: #fff; border-radius: 10px; box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.05); padding: 1.25em 0.19em 0.19em 0.19em; } .delete .list_item { opacity: .5; } .list .info_area { padding: 0 12px 15px 12px; position: relative; } .list .result_name { font-weight: var(--weight-bold); display: block; margin: 5px 0 15px; background: url(/Images/Icon_go.png) right top no-repeat; background-size: 14px; padding-right: 22px; position: relative; } .list p.result_name { background: none; padding-right: 0; } .list .result_name.color_blue { color: var(--point-color); } .list .result_name.color_red { color: var(--red-color); } .list .top_group { display: flex; justify-content: space-between; align-items: center; font-size: var(--size-12); position: relative; } .list .bottom_group { display: flex; justify-content: space-between; align-items: flex-start; font-size: var(--size-13); font-weight: var(--weight-semibold); } .list .bottom_group.type02 { align-items: center; border-top: 1px dashed #ADB5BD; padding-top: 15px; margin-top: 15px; } .list .left, .list .right { display: flex; flex-wrap: wrap; gap: 5px; } .list .left { align-items: center; } .list .right, .list .right .horizon_group { justify-content: flex-end; } .list .horizon_group { gap: 5px; } .list .left.horizon { flex-direction: column; align-items: flex-start; width: 100%; } .list .right.horizon { flex-direction: column; gap: 3px; } .top_group .color_gray { color: var(--gray-color); } .top_group .color_blue { color: var(--point-color); } .top_group .color_red { color: var(--red-color); } .top_group .color_purple { color: var(--purple-color); } .list .top_group .check_history { content: url(/Images/icon_check.png); display: block; width: 14px; height: 14px; } .list .top_group .item em { position: relative; padding-left: 6px; margin-left: 4px; } .list .top_group .item em:first-child { padding-left: 0; margin-left: 0; } .list .top_group .item em::before { content: ''; display: block; width: 2px; height: 2px; border-radius: 50%; background: #A3A5AC; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); } .list .top_group .item em:first-child:before { content: none; } .list .bottom_group .right .item_group { justify-content: flex-end; } .list .bottom_group .left .item em { font-size: 11px; font-weight: var(--weight-semibold); padding: 6px 9px; border-radius: 50px; } .list .bottom_group .left .item em.bgcolor_blue { background: #E7EFFF; color: var(--point-color); } .list .bottom_group .left .item em.bgcolor_blue.mark { background: #E7EFFF url(/Images/icon_exc_mark_blue.png) center left 6px no-repeat; background-size: 14px; padding-left: 22px; } .list .bottom_group .left .item em.bgcolor_red { background: #FFEEE7; color: var(--red-color); } .list .bottom_group .left .item em.bgcolor_red.mark { background: #FFEEE7 url(/Images/icon_exc_mark_red.png) center left 6px no-repeat; background-size: 14px; padding-left: 22px; } .list .result_area { display: flex; align-items: flex-start; gap: 3px; } .list .result_area .result_name { margin-top: 2px; } .list .result_area em { font-size: 11px; font-weight: var(--weight-semibold); text-align: center; padding: 4px 9px; border-radius: 50px; min-width: fit-content; } .list .result_area em.bgcolor_blue { background: #E7EFFF; color: var(--point-color); } .list .result_area em.bgcolor_red { background: #FFEEE7; color: var(--red-color); } .list .result_area em.type01 { background: #A6C6F6; color: #fff; } .list .result_area em.type02 { background: #B3BCE4; color: #fff; } .list .result_area em.type03 { background: #C8B3E4; color: #fff; } .list .bottom_group .item_group { display: flex; align-items: center; padding-left: 6px; /* margin-left: 4px; */ position: relative; word-break: keep-all; } .list .bottom_group .item_group:first-child { margin-left: 0; padding-left: 0; } .list .bottom_group .item_group::before { content: ''; display: block; width: 2px; height: 2px; border-radius: 50%; background: #A3A5AC; position: absolute; top: 50%; right: -7px; transform: translate(0, -50%); } .list .bottom_group .horizon>.item_group:last-child { padding-left: 0; margin-left: 0; } .list .bottom_group .item_group:last-child::before, .list .bottom_group .horizon>.item_group:last-child::before { content: none; } .list .item_group .label { color: var(--gray-color); padding-right: 3px; } .list .btn_area { display: flex; justify-content: space-evenly; background: var(--bg-color); border-radius: 0 0 8px 8px; font-size: var(--size-12); } .list .btn_area a { display: block; width: 100%; padding: 11px 0; text-align: center; position: relative; } .list .btn_area a::after { content: ''; display: block; background: #C8CAD2; width: 1px; height: 35%; position: absolute; top: 50%; right: 0; transform: translate(0, -50%); } .list .btn_area a:last-child:after { content: none; } .classify { display: flex; align-items: center; gap: 3px; } .classify em { border-radius: 50px; padding: 5px 10px; font-size: var(--size-14); font-weight: var(--weight-semibold); color: #fff; } .classify em.type01 { background: #A6C6F6; } .classify em.type02 { background: #B3BCE4; } .classify em.type03 { background: #C8B3E4; } .classify em.type04 { background: #E4B3BE; } .list .amount_group { justify-content: flex-end; margin-bottom: 15px; } .list .subtotal { display: flex; flex-direction: column; gap: 3px; } .list .subtotal .horizon_group { justify-content: flex-end; } .list .subtotal .item_group { display: flex; justify-content: space-between; font-size: var(--size-14); } .list .subtotal .item_group .value { font-weight: var(--weight-bold); } .list .subtotal button { background: #4865ED; border-radius: 6px; font-size: var(--size-12); font-weight: var(--weight-bold); color: #fff; padding: 12px 21px; margin-top: 5px; } .list .subtotal .btn_all_delete { background: #9AA3AE; } /* 수량 */ .amount_group { display: flex; align-items: center; gap: 3px; } .amount_group .amount_num { border-radius: 6px; width: 50px; height: 26px; font-size: var(--size-13); padding: 0.25em 0.63em; } .amount_group .btn_minus { background: #4865ED url(/Images/icon_minus.png) center center no-repeat; background-size: 20px; width: 26px; height: 26px; } .amount_group .btn_plus { background: #4865ED url(/Images/icon_plus.png) center center no-repeat; background-size: 20px; width: 26px; height: 26px; } .amount_group .btn_get, .amount_group .btn_edit { /* font-size: var(--size-14); */ margin-left: 7px; } /* tab style */ .tab_wrap { height: 54px; background: #E9EBF3; border-radius: 10px; display: flex; justify-content: space-evenly; align-items: center; margin-bottom: 20px; } .tab_wrap a { font-size: var(--size-14); font-weight: var(--weight-bold); color: var(--gray-color); height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; border-radius: 10px; } .tab_wrap a.active { color: #fff; background: linear-gradient(to right, #6F5FFF, #0F43CF); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.14); } .tab_wrap.tab_type02 { height: 40px; border-radius: 50px; } .tab_wrap.tab_type02 a { font-size: var(--size-13); border-radius: 50px; } /* guide */ .guide { display: flex; justify-content: flex-end; position: relative; margin-bottom: 20px; } .guide_title { background: url(/Images/icon_info.png) top -2px left no-repeat; background-size: 20px; padding-left: 24px; font-size: var(--size-12); color: var(--gray-color); cursor: pointer; } .guide_pop { display: none; font-size: var(--size-11); background: #fff; border: 1px solid #E4E5E7; border-radius: 8px; padding: 15px; box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.05); position: absolute; top: 20px; width: 210px; z-index: 1; } .guide_pop h1 { font-weight: var(--weight-semibold); padding-bottom: 5px; } .guide_pop p { color: var(--gray-color); } /* 주문 :: 의약품주문 */ .order search { padding: 1.25em 0 1.25em 0.94em; } .order .horizon_group { padding-right: 0.94em; } .set_product { display: flex; gap: 5px; margin-top: 15px; overflow-x: auto; } .set_product a { display: block; height: 40px; font-size: var(--size-14); font-weight: var(--weight-bold); color: #fff; padding: 10px 16px 10px 35px; border-radius: 50px; white-space: nowrap; } .set_product a.type01 { background: #A6C6F6 url(/Images/icon_set.png) center left 16px no-repeat; background-size: 16px 16px; } .set_product a.type02 { background: #B3BCE4 url(/Images/icon_set.png) center left 16px no-repeat; background-size: 16px 16px; } .set_product a.type03 { background: #C8B3E4 url(/Images/icon_set.png) center left 16px no-repeat; background-size: 16px 16px; } /* 의약품주문 :: 알림확인 팝업 */ .bottomSheet_wrap.alarm_confirm_popup { min-height: 574px; } .bottomSheet_wrap.alarm_confirm_popup .contents_wrap { overflow-y: auto; height: 450px; } .bottomSheet_wrap.alarm_confirm_popup .list p.result_name{ margin-top: 0; } /* 의약품주문 :: 세트상품 팝업 */ .bottomSheet_wrap.set_product_popup { min-height: 530px; } .bottomSheet_wrap.set_product_popup .contents_wrap { overflow-y: auto; height: 344px; } .bottomSheet_wrap.set_product_popup .contents_wrap .list .set_choice { margin-bottom: 10px; } .bottomSheet_wrap .contents_wrap .list ul li { margin-top: 10px; } .bottomSheet_wrap.set_product_popup .contents_wrap .list ul li:first-child { margin-top: 0; } .bottomSheet_wrap.set_product_popup .footer .total { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; } .bottomSheet_wrap.set_product_popup .footer .amount_group button { width: 26px; } .bottomSheet_wrap.set_product_popup .footer .sum { font-size: var(--size-20); } .bottomSheet_wrap.set_product_popup .footer .sum strong { color: var(--point-color); font-weight: var(--weight-bold); } /* 의약품주문 :: 제품정보 */ .result_wrap { width: 100%; height: 100%; position: fixed; top: 100%; left: 0; transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1); background: #fff; overflow: auto; z-index: 100; } .result_wrap.show { top: 0; } .result_wrap .contents_wrap { min-height: calc(100vh - 44px); } .product_info { background: #E7EFFF url(/Images/bg_product.png) right 15px top 15px no-repeat; background-size: 68px; padding: 25px 20px; } .product_info .top_group { font-size: var(--size-12); } .product_info em.color_gray { color: var(--gray-color); } .product_info .top_group em { position: relative; padding-left: 6px; margin-left: 4px; } .product_info .top_group em:first-child { padding-left: 0; margin-left: 0; } .product_info .top_group em::before { content: ''; display: block; width: 2px; height: 2px; border-radius: 50%; background: #A3A5AC; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); } .product_info .top_group em:first-child:before { content: none; } .product_info p.name { font-weight: var(--weight-bold); margin-top: 5px; } .product_info .btn_area { display: flex; gap: 5px; margin-top: 15px; } .result_wrap ul.item_detail { margin: 1.25em 0.94em; } ul.item_detail { display: flex; flex-wrap: wrap; background: #fff; border: 1px solid #E9EBF3; border-radius: 10px; font-size: var(--size-14); } ul.item_detail li { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 5.5px 15px; min-height: 54px; border-bottom: 1px solid #E9EBF3; } ul.item_detail li:last-child { border-bottom: 0; } ul.item_detail li.w50 { width: 50%; flex: 1 1 50%; border-left: 1px solid #E9EBF3; } ul.item_detail li.no_border { border-left: none; } ul.item_detail li .input_group { width: 70%; } ul.item_detail li .input_group .input_txt, ul.item_detail li .input_group .input_cal { height: 42px; } ul.item_detail li.event .value { color: var(--point-color); } ul.item_detail li.event_period .value { width: 60px; word-wrap: break-word; } ul.item_detail em.bgcolor_blue.mark { color: var(--point-color); font-size: var(--size-11); font-weight: var(--weight-semibold); padding: 6px 9px; border-radius: 50px; background: #E7EFFF url(/Images/icon_exc_mark_blue.png) center left 6px no-repeat; background-size: 14px; padding-left: 22px; margin-right: 12px; } ul.item_detail em.bgcolor_red.mark { color: var(--red-color); font-size: var(--size-11); font-weight: var(--weight-semibold); padding: 6px 9px; border-radius: 50px; background: #FFEEE7 url(/Images/icon_exc_mark_red.png) center left 6px no-repeat; background-size: 14px; padding-left: 22px; margin-right: 12px; } ul.item_detail p strong { font-weight: var(--weight-semibold); color: var(--point-color); } ul.item_detail .label { color: var(--gray-color); font-weight: var(--weight-semibold); padding-left: 12px; position: relative; word-break: keep-all; } ul.item_detail .label::before { content: ''; display: block; background: #808080; width: 4px; height: 4px; position: absolute; top: 7px; left: 0; } ul.item_detail .value { font-weight: var(--weight-bold); text-align: right; } ul.item_detail .group { display: flex; align-items: center; gap: 12px; } .result_wrap .footer { width: 100%; display: flex; gap: 7px; padding: 0 0.94em; position: sticky; bottom: 20px; z-index: 5; } .result_wrap .footer button { width: 100%; } .divide { padding-top: 38px; position: relative; } .divide::before { content: ''; display: block; background: #F2F3F4; width: 100%; height: 8px; position: absolute; top: 0; left: 0; } .center_wrap { padding-bottom: 50px; } .center_info_wrap { margin: 0 0.94em; } .result_wrap h2 { font-weight: var(--weight-semibold); padding-bottom: 10px; } .border { border: 1px solid #E9EBF3; border-radius: 10px; padding: 1.25em 0.94em; } .center { display: flex; align-items: center; margin: 40px 0; max-height: 500px; transform: translateY(0); transition: transform 0.4s ease, opacity 0.2s ease, max-height 0.4s ease, margin 0.8s ease; opacity: 1; position: relative; } .border_bottom { position: relative; } .border_bottom::after { content: ''; display: block; width: 100%; height: 1px; border-top: 1px dashed #ADB5BD; position: absolute; top: -20px; } .border_bottom:first-child:after { content: none; } .center_info .center.close { max-height: 0; opacity: 0; transform: translateY(-100%); pointer-events: none; margin: 0; } .center:first-child { margin: 0; } .center:last-of-type { margin-bottom: 0; } .center h3 { background: url(/Images/icon_center.png) center top no-repeat; background-size: 32px; text-align: center; padding-top: 36px; margin: 0 25px 0 10px; } .center h3>span { font-size: var(--size-12); font-weight: var(--weight-semibold); display: block; width: 50px; } .center ul { width: 100%; display: flex; flex-direction: column; gap: 8px; } .center li { display: flex; align-items: center; } .center .label, .center .value { font-size: var(--size-13); font-weight: var(--weight-semibold); } .center .label { color: var(--gray-color); display: inline-block; flex-basis: 65px; } .center .color_red { color: var(--red-color); } .center_info .btn_more { font-size: var(--size-12); text-align: center; background: #F2F3F4; border-radius: 8px; display: block; width: 100%; padding: 10px 0; margin-top: 20px; } .center_info .btn_more span { background: url(/Images/icon_arrow_select_down_s.png) right center no-repeat; background-size: 14px; padding-right: 20px; } .center_info .btn_more.open span { background: url(/Images/icon_arrow_select_up_s.png) right center no-repeat; background-size: 14px; } /* 의약품주문 :: 제품상세보기 */ .product_detail_wrap .contents_wrap .label, .product_detail_wrap .contents_wrap .value { font-size: var(--size-13); font-weight: var(--weight-semibold); } .product_detail_wrap .contents_wrap .label { color: var(--gray-color); display: inline-block; flex: 0 1 80px; } .product_detail_wrap .contents_wrap .value { flex: 1; } .product_detail_wrap li { display: flex; border-bottom: 1px solid #E9EBF3; padding: 12.5px 0; } .product_point_info .img_wrap { background: #F2F3F4 url(/Images/img_noimg.png) center center no-repeat; background-size: 86px; height: 180px; overflow: hidden; } .product_point_info .img_wrap .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal { top: auto; left: 50%; transform: translate(-50%, 0); } .product_point_info ul { margin: 15px 15px 20px; } .product_detail_info h2 { margin-left: 15px; } .product_detail_info ul { margin: 0 15px 30px 15px; } .btn_pdf { display: block; width: 28px; height: 28px; background: url(/Images/icon_pdf.png) center center no-repeat; background-size: 28px; margin-top: 8px; } /* 의약품주문 :: 구입입력 */ .history_list_wrap .list_title { margin: 20px 15px 0 15px; } .history_list_wrap h2 { padding-bottom: 0; } .purchase_list_wrap { margin: 0 15px 30px 15px; } .period_choice { display: flex; align-items: center; gap: 3px; } .period_choice .period { border-radius: 6px; width: 125px; height: 26px; font-size: var(--size-13); padding: 0.25em 0.63em; } .period_choice .btn_prev { background: #4865ED url(/Images/icon_arrow_prev.png) center center no-repeat; background-size: 20px; width: 26px; height: 26px; } .period_choice .btn_next { background: #4865ED url(/Images/icon_arrow_next.png) center center no-repeat; background-size: 20px; width: 26px; height: 26px; } .purchase { display: flex; align-items: center; margin: 40px 0; position: relative; } .purchase:first-child { margin-top: 0; } .purchase:last-child { margin-bottom: 0; } .purchase_list .btn_area { width: 25%; background: url(/Images/icon_history_file.png) center top no-repeat; background-size: 32px; padding-top: 40px; margin: 0 25px 0 10px; text-align: center; } .purchase_list ul { width: 75%; display: flex; flex-direction: column; gap: 8px; } .purchase_list li { display: flex; } .purchase_list .label, .purchase_list .value { font-size: var(--size-13); font-weight: var(--weight-semibold); } .purchase_list .label { color: var(--gray-color); display: inline-block; flex-basis: 65px; } /* 의약품주문 :: 구입이력상세 팝업 */ .bottomSheet_wrap.history_detail_popup { min-height: 410px; } .bottomSheet_wrap.history_detail_popup .contents_wrap{ display: flex; flex-direction: column; gap: 10px; height: 356px; overflow-y: auto; padding-bottom: 91px; } .bottomSheet_wrap.history_detail_popup ul.item_detail li:nth-child(4) { border-bottom: 0; } /* 의약품주문 :: 알림등록 */ .alarm_wrap .contents_wrap { margin: 0.94em; /* min-height: 668px; */ } .alarm_wrap .product_info { padding: 20px 15px; border-radius: 8px; background: #E7EFFF; } .alarm_wrap .border { margin: 20px 0 50px; } .alarm_msg { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } .alarm_msg .basicNum { justify-content: flex-end; } .alarm_list li { margin: 40px 0; } .alarm_list li:first-child { margin-top: 0; } .alarm_list li:last-child { margin-bottom: 0; } .alarm_list .alarm { background: url(/Images/icon_alarm.png) left 10px center no-repeat; background-size: 40px; padding-left: 70px; } /* 의약품주문 :: 장바구니 */ .shoppingCart_wrap .info { margin: 10px 15px 20px 15px; } .shoppingCart_wrap .list_wrap { min-height: calc(100vh - 106px); } .list .all_choice { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px } .list .all_choice .btn_area { padding-bottom: 0; gap: 7px; } .list .all_choice .btn_area button { background: #9AA3AE; border-radius: 6px; font-size: var(--size-15); font-weight: var(--weight-bold); color: #fff; padding: 12px 21px; } .cart_list .list_item { padding: 1.25em 0.94em; display: flex; align-items: flex-start; } .cart_list .info_wrap { width: 100%; } .cart_list .info_area{ padding: 0; } .cart_list p.result_name { margin-top: 0; padding-right: 22px; } .cart_list .edit_area { background: #F2F3F4; border-radius: 8px; padding: 0.94em 1.25em; display: flex; flex-direction: column; align-items: flex-end; margin-top: 15px; } .cart_list .edit_area .amount_group { margin-bottom: 10px; } .cart_list .edit_area .total strong { color: var(--point-color); font-weight: var(--weight-bold); } .cart_list .btn_delete { background: url(/Images/Icon_delete.png) left top -2px no-repeat; background-size: 14px; display: block; width: 14px; height: 22px; position: absolute; top: 0; right: 0; } .cart_list .soldout .list_item{ border: 1px solid #9B0A16; } .cart_list .soldout .info.type02{ margin: 10px 0 0 0; background: #FFEEE7; } .cart_list .soldout .info.type02 strong{ color: var(--red-color); } .shoppingCart_wrap .total_wrap { position: sticky; bottom: 0; } .shoppingCart_wrap .total_wrap button { width: 100%; margin-top: 10px; } /* 주문 :: 행사제품 */ .event .list_wrap { min-height: calc(100vh - 172px); } .list .bottom_group .item_group.unit_price{ padding-left: 0; } .item_group.unit_price .label, .item_group.unit_price .value { font-size: 14px; color: var(--basic-color); } .item_group.unit_price strong { color: var(--point-color); font-weight: var(--weight-bold); } /* 주문 :: 의약품재주문 */ .reorder search { padding: 1.25em 0.94em; } .info { border-radius: 10px; color: var(--gray-color); display: flex; flex-direction: column; } .info strong { font-weight: var(--weight-bold); color: var(--point-color); } .info p { background: url(/Images/icon_info.png) top -2px left no-repeat; background-size: 20px; padding-left: 24px; } .info .btn_info_basic { align-self: flex-end; background: #D0D1D6; border-radius: 6px; padding: 8px 28px; margin-top: 10px; color: var(--basic-color); } .info.type01 { background: #F5F5F5; padding: 1.25em; font-size: var(--size-14); } .info.type02 { background: #E9EBF3; padding: 0.63em; font-size: var(--size-12); } /* 조회 :: 주문내역 */ .order_list .tab_wrap { margin: 20px 0.94em 0; } .list .item_group_wrap { margin-top: -10px; margin-bottom: 15px; } .bottomSheet_wrap.order_list_popup { min-height: 460px; } .order_list .total .value em:last-child { position: relative; padding-left: 20px; } .order_list .total .value em:last-child::after { content: ''; display: inline-block; width: 1px; height: 10px; background: #ADB5BD; position: absolute; top: 8px; left: 10px; } /* 조회 :: 주문내역상세팝업 */ .order_list_popup ul.item_detail li:nth-last-child(-n+2) { border-bottom: 0; } /* 조회 :: 매출원장 */ .sales_ledger .total_wrap .total { align-items: flex-start; } .sales_ledger .total .item_group_wrap { display: flex; flex-direction: column; gap: 3px; } .sales_ledger .total .item_group_wrap .horizon_group{ justify-content: flex-end; } .sales_ledger .total .item_group_wrap .item_group { display: flex; justify-content: flex-end; gap: 5px; font-size: 16px; } .sales_ledger .total .value { font-weight: var(--weight-bold); color: var(--point-color); } .sales_ledger .total .item_group:last-child { position: relative; padding-left: 20px; } .sales_ledger .total .item_group:last-child::after { content: ''; display: inline-block; width: 1px; height: 10px; background: #ADB5BD; position: absolute; top: 9px; left: 8px; } .sales_ledger .subtotal { flex-direction: row; justify-content: space-between; align-items: flex-start; border-top: 1px dashed #ADB5BD; padding-top: 15px; margin-top: 15px; } .sales_ledger .subtotal:first-child { border: 0; padding-top: 0; margin-top: 0; } .sales_ledger .subtotal h2 { font-size: var(--size-12); color: var(--gray-color); } .sales_ledger .subtotal.month h2 { color: var(--basic-color); } .sales_ledger .subtotal .item_group_wrap { flex-direction: column; align-items: flex-end; margin-top: 0; margin-bottom: 0; gap: 5px; } .sales_ledger .list .subtotal .item_group .label { color: var(--basic-color); } .sales_ledger .subtotal .item_group { padding-left: 20px; position: relative; gap: 5px; } .sales_ledger .subtotal .item_group:last-child::after { content: ''; display: inline-block; width: 1px; height: 10px; background: #ADB5BD; position: absolute; top: 4px; left: 8px; } /* 조회 :: 세금계산서 */ /* 조회 :: 회수의약품 */ .recovered_medicine .list .bottom_group .horizon>.item_group:last-child { align-items: flex-start; width: 100%; } .recovered_medicine .list .bottom_group .horizon>.item_group:last-child .label { flex-basis: 58px; } .recovered_medicine .list .bottom_group .horizon>.item_group:last-child .value { flex-basis: 100%; } /* 조회 :: 일련번호 */ .bottomSheet_wrap .product_info{ border-radius: 10px; } .serial_number .cal_group input.input_cal { width: 47.2%; } /* 조회 :: 일련번호보기 팝업 */ .bottomSheet_wrap.serial_number_popup { min-height: 453px; } .bottomSheet_wrap.serial_number_popup .contents_wrap { overflow-y: auto; max-height: 305.54px; } .serial_number_popup .list ul li { margin-top: 10px; } .serial_number_popup .list_item .bottom_group { padding-top: 5px; } .serial_number_popup .list_item>.item_group .value { font-weight: var(--weight-bold); color: var(--point-color); } /* 조회 :: 알림제품 */ .alarm_product search .select_group { width: 50%; } .alarm_product search .horizon_group:last-child { justify-content: space-between; } .alarm_product_list .btn_area button.btn_alarm_confirm { background: #4865ED; } .alarm_product .productCheck { padding-top: 3px; } .alarm_product_list .list_item { padding: 1.25em 0.94em; display: flex; align-items: flex-start; } .alarm_product .list .info_area { padding: 0 0 0 8px; } /* 조회 :: 보험수가조회 */ .Insurance_price .limit.lower { background: url(/Images/icon_limit_lower.png) left center no-repeat; background-size: 14px; padding-left: 16px; color: var(--point-color); } .Insurance_price .limit.upper { background: url(/Images/icon_limit_upper.png) left center no-repeat; background-size: 14px; padding-left: 16px; color: var(--red-color); } /* 결제 :: 잔고결제 */ .balance_settlement .contents_wrap { padding: 1.25em 0.94em 110px; min-height: calc(100vh - 176px); } .balance_settlement .btn_wrap { bottom: 82px; } .balance_use { border: 1px solid #E9EBF3; border-radius: 10px; padding: 30px 0.94em; margin-top: 15px; } .balance { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; } .balance li { display: flex; justify-content: space-between; } .balance .sum strong { font-weight: var(--weight-bold); } .balance_use .input_group .group { display: flex; gap: 5px; } .balance_use .input_txt.price { width: 72.8%; } .balance_use .input_group .group button { font-size: var(--size-14); flex-basis: 80px; } .reservation_payment { border: 1px solid #E9EBF3; border-radius: 10px; margin-top: 15px; } .reservation_payment .list ul li { margin-top: 40px; display: flex; justify-content: space-between; } .reservation_payment .list ul li:first-child { margin-top: 20px; } .reservation_payment .list .info_area { padding: 0; } .reservation_payment .list .btn_area { background: #fff; border-radius: 0; } .balance_settlement .ui-accordion .ui-accordion-header { font-size: 16px; padding: 1.25em 0.94em; } .balance_settlement .ui-accordion .ui-accordion-content { border-top: 0; padding: 0 0 5px 0; margin: 0 0.98em 1.25em; border-radius: 0; } .payment_method { border: 1px solid #E9EBF3; border-radius: 10px; margin-top: 15px; } .res_group { display: flex; justify-content: space-between; } .card .guide { margin-bottom: 10px; } .card .input_cal, .birthday .input_txt { width: 72.8%; } .card .input_group .group { display: flex; gap: 5px; } .card .input_group .group button { font-size: var(--size-14); flex-basis: 80px; } .card ul { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 10px; } .card li { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; border: 1px solid #E9EBF3; border-radius: 6px; padding: 17px 20px; flex: 1 1 40%; font-size: var(--size-12); text-align: center; } .card li.active { border: 2px solid var(--point-color); } .card li.empty { background: url(/Images/img_card_empty.png) center center no-repeat; background-size: 44px; } .card li img { width: 100px; } .card .affiliate_card{ display: flex; flex-direction: column; gap: 10px; } .card .birthday { margin-top: 30px; } .card_manage { border: 1px dashed #ADB5BD; border-radius: 6px; font-size: var(--size-14); color: var(--gray-color); display: block; width: 100%; padding: 12px; text-align: center; margin: 10px 0 30px; } .card_manage span { position: relative; } .card_manage span::before { content: ''; display: block; background: url(/Images/icon_card_plus.png) center center no-repeat; background-size: 20px; width: 20px; height: 20px; position: absolute; top: -2px; left: -24px; } .payment_card h3 { font-size: var(--size-14); font-weight: var(--weight-bold); padding-bottom: 5px; } .payment_card li { flex: 0 1 22.5%; gap: 5px; padding: 0; } .payment_card li a { padding: 5px 7px; } .payment_card li img { width: 54px; max-width: inherit; vertical-align: middle; } .card_number { display: flex; flex-direction: row; gap: 5px; } .card .expiration_date { display: flex; flex-direction: column; gap: 5px; } .card .expiration_date .card_save { justify-content: flex-end; margin: 5px 0 10px 0; } .card_num_display { justify-content: flex-end; margin: 10px 0; } .reservation_result .complete .text01 { background: url(/Images/icon_complete_reservation.png) center top no-repeat; background-size: 53px; } /* 결제 :: 내카드관리 팝업 */ .bottomSheet_wrap.mycard_popup, .bottomSheet_wrap.mycard_reg_popup { min-height: 530px; } .mycard_popup .contents_wrap { height: 406px; overflow-y: auto; } .mycard_popup .list_item { display: flex; justify-content: space-between; } .mycard_popup .list .btn_area { background: #fff; border-radius: 0; flex-direction: column; } .mycard_reg { display: flex; flex-direction: column; gap: 20px; } .card_name .group { display: flex; justify-content: space-between; } .expiration_date .group { display: flex; gap: 5px; } .mycard_reg .select_group { display: flex; flex-direction: column; gap: 5px; } /* 결제 :: 입금내역조회 */ .deposit_history .list_item { display: flex; justify-content: space-between; /* align-items: center; */ } .deposit_history .list .btn_area { background: #fff; border-radius: 0; padding-right: 0.94em; } .deposit_history .list .btn_area .btn_sales_print { min-height: fit-content; } /* 약가인하 :: 약가인하내역 */ search .btn_amount { height: 40px; font-size: var(--size-14) } .lower_price .subtotal { flex-direction: row; justify-content: space-between; align-items: flex-start } .lower_price .subtotal h2 { font-size: var(--size-12); color: var(--gray-color); } .lower_price .subtotal .item_group_wrap { display: flex; flex-direction: column; align-items: flex-end; margin-top: 0; margin-bottom: 0; gap: 5px; } .lower_price .subtotal .item_group { padding-left: 20px; position: relative; gap: 5px; } .lower_price .list .subtotal .item_group .label { color: var(--basic-color); } .lower_price .subtotal .item_group::after { content: ''; display: inline-block; width: 1px; height: 10px; background: #ADB5BD; position: absolute; top: 4px; left: 8px; } .lower_price .subtotal .item_group:first-child:after { content: none; } .lower_price .list .item_group_wrap { margin-bottom: 0; } .lower_price .total .value em:last-child { position: relative; padding-left: 20px; } .lower_price .total .value em::after { content: ''; display: inline-block; width: 1px; height: 10px; background: #ADB5BD; position: absolute; top: 8px; left: 10px; } .lower_price .total .value em:last-child::after { content: none; } /* 약가인하서류보상 :: 등록내역 */ .compensation_reg_list .function_btn_area { justify-content: flex-end; padding-bottom: 20px; } .compensation_reg_list .list .all_choice { justify-content: flex-end; } .compensation_reg_list .list .info_area { padding: 0 12px 15px 0px; } /* 반품등록 */ .wrap.return .list_wrap{ padding-bottom: 66px; } /* 반품등록 :: 반품정보 */ ul.item_detail li .input_group.defectivePro { width: auto; } .input_group.toCapital { position: relative; } .btn_capital { display: block; background: url(/Images/icon_capital_off.png) 0 0 no-repeat; background-size: 100%; width: 30px; height: 24px; position: absolute; top: 10px; right: 14px; cursor: pointer; } .btn_capital.on { background: url(/Images/icon_capital_on.png) 0 0 no-repeat; background-size: 100%; } /* 에러페이지 */ .error .contents_wrap { padding: 150px 0.94em 30px; min-height: calc(100vh - 0px); position: relative; } .error .contents_wrap article p { text-align: center; } .error .contents_wrap article p:first-child { background: url(/Images/icon_error.png) center top no-repeat; background-size: 61px; padding-top: 90px; font-size: var(--size-20); font-weight: var(--weight-bold); padding-bottom: 10px; } .error .contents_wrap article p:last-child { font-size: var(--size-12); color: var(--gray-color); } .error .info { position: absolute; bottom: 30px; left: 15px; right: 15px; } /* loading */ @keyframes rotate-loading { 0% { transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); } 100% { transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); } } @-moz-keyframes rotate-loading { 0% { transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); } 100% { transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); } } @-webkit-keyframes rotate-loading { 0% { transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); } 100% { transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); } } @-o-keyframes rotate-loading { 0% { transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); } 100% { transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); } } @keyframes rotate-loading { 0% { transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); } 100% { transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); } } @-moz-keyframes rotate-loading { 0% { transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); } 100% { transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); } } @-webkit-keyframes rotate-loading { 0% { transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); } 100% { transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); } } @-o-keyframes rotate-loading { 0% { transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); } 100% { transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); } } @keyframes loading-text-opacity { 0% { opacity: 0 } 20% { opacity: 0 } 50% { opacity: 1 } 100% { opacity: 0 } } @-moz-keyframes loading-text-opacity { 0% { opacity: 0 } 20% { opacity: 0 } 50% { opacity: 1 } 100% { opacity: 0 } } @-webkit-keyframes loading-text-opacity { 0% { opacity: 0 } 20% { opacity: 0 } 50% { opacity: 1 } 100% { opacity: 0 } } @-o-keyframes loading-text-opacity { 0% { opacity: 0 } 20% { opacity: 0 } 50% { opacity: 1 } 100% { opacity: 0 } } .loading-container, .loading { height: 100px; position: relative; width: 100px; border-radius: 100%; } .loading-container { margin: 40px auto } .loading { border: 2px solid transparent; border-color: transparent #6F5FFF transparent #0F43CF; -moz-animation: rotate-loading 1.5s linear 0s infinite normal; -moz-transform-origin: 50% 50%; -o-animation: rotate-loading 1.5s linear 0s infinite normal; -o-transform-origin: 50% 50%; -webkit-animation: rotate-loading 1.5s linear 0s infinite normal; -webkit-transform-origin: 50% 50%; animation: rotate-loading 1.5s linear 0s infinite normal; transform-origin: 50% 50%; } #loading-text { -moz-animation: loading-text-opacity 2s linear 0s infinite normal; -o-animation: loading-text-opacity 2s linear 0s infinite normal; -webkit-animation: loading-text-opacity 2s linear 0s infinite normal; animation: loading-text-opacity 2s linear 0s infinite normal; color: #212121; font-family: "Helvetica Neue, " Helvetica", " "arial"; font-size: 10px; font-weight: bold; margin-top: 45px; opacity: 0; position: absolute; text-align: center; text-transform: uppercase; top: 0; width: 100px; } .datepicker_background { background: #fff url(/Images/icon_calendar.png) center right 10px no-repeat !important; background-size: 24px !important; font-size: var(--size-14) !important; }