/* 축소하지 못했습니다. 축소되지 않은 콘텐츠를 반환합니다. (7,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (12,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (15,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (17,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (19,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (20,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (24,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (25,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (26,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (27,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (29,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (30,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (31,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (32,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (33,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (35,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (36,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (38,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (39,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (40,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (42,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (43,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (45,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (51,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (57,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (58,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (63,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (70,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (72,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (73,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (75,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (76,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (78,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (79,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (80,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (81,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (111,23): run-time error CSS1039: Token not allowed after unary operator: '-bg1' (111,40): run-time error CSS1039: Token not allowed after unary operator: '-g1' (112,183): run-time error CSS1039: Token not allowed after unary operator: '-font1' (136,48): run-time error CSS1039: Token not allowed after unary operator: '-line3' (136,67): run-time error CSS1039: Token not allowed after unary operator: '-g1' (162,71): run-time error CSS1039: Token not allowed after unary operator: '-g3' (178,25): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (181,109): run-time error CSS1039: Token not allowed after unary operator: '-font1' (181,134): run-time error CSS1039: Token not allowed after unary operator: '-header' (182,58): run-time error CSS1039: Token not allowed after unary operator: '-primary-c1' (184,55): run-time error CSS1039: Token not allowed after unary operator: '-bg1' (191,44): run-time error CSS1039: Token not allowed after unary operator: '-header' (191,68): run-time error CSS1039: Token not allowed after unary operator: '-space1' (191,93): run-time error CSS1039: Token not allowed after unary operator: '-g1' (193,44): run-time error CSS1039: Token not allowed after unary operator: '-header' (217,99): run-time error CSS1039: Token not allowed after unary operator: '-primary-c1' (219,71): run-time error CSS1039: Token not allowed after unary operator: '-primary-c1' (230,48): run-time error CSS1039: Token not allowed after unary operator: '-space1' (233,70): run-time error CSS1039: Token not allowed after unary operator: '-header' (257,95): run-time error CSS1039: Token not allowed after unary operator: '-space1' (260,66): run-time error CSS1039: Token not allowed after unary operator: '-space1' (263,34): run-time error CSS1039: Token not allowed after unary operator: '-space1' (273,32): run-time error CSS1039: Token not allowed after unary operator: '-space2' (319,97): run-time error CSS1039: Token not allowed after unary operator: '-g3' (324,60): run-time error CSS1039: Token not allowed after unary operator: '-g1' (330,195): run-time error CSS1039: Token not allowed after unary operator: '-line1' (336,73): run-time error CSS1039: Token not allowed after unary operator: '-color-gray0' (372,151): run-time error CSS1039: Token not allowed after unary operator: '-space1' (373,120): run-time error CSS1039: Token not allowed after unary operator: '-space1' (378,167): run-time error CSS1039: Token not allowed after unary operator: '-line2' (387,44): run-time error CSS1039: Token not allowed after unary operator: '-space1' (408,113): run-time error CSS1039: Token not allowed after unary operator: '-g3' (408,181): run-time error CSS1039: Token not allowed after unary operator: '-default-txt' (419,27): run-time error CSS1039: Token not allowed after unary operator: '-font2' (419,46): run-time error CSS1039: Token not allowed after unary operator: '-g2' (421,25): run-time error CSS1039: Token not allowed after unary operator: '-invalid' (423,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-c1' (424,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-c2' (425,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-c3' (436,47): run-time error CSS1039: Token not allowed after unary operator: '-font1' (444,173): run-time error CSS1039: Token not allowed after unary operator: '-line1' (456,29): run-time error CSS1039: Token not allowed after unary operator: '-space4' (461,117): run-time error CSS1039: Token not allowed after unary operator: '-com2' (463,102): run-time error CSS1039: Token not allowed after unary operator: '-g1' (465,83): run-time error CSS1039: Token not allowed after unary operator: '-line2' (466,45): run-time error CSS1039: Token not allowed after unary operator: '-space3' (467,45): run-time error CSS1039: Token not allowed after unary operator: '-primary-c1' (468,45): run-time error CSS1039: Token not allowed after unary operator: '-primary-c3' (545,111): run-time error CSS1039: Token not allowed after unary operator: '-img1' (554,29): run-time error CSS1039: Token not allowed after unary operator: '-font1' (554,67): run-time error CSS1039: Token not allowed after unary operator: '-g1' (572,24): run-time error CSS1039: Token not allowed after unary operator: '-com2' (572,43): run-time error CSS1039: Token not allowed after unary operator: '-com2' (572,88): run-time error CSS1039: Token not allowed after unary operator: '-line3' (573,65): run-time error CSS1039: Token not allowed after unary operator: '-line1' (574,86): run-time error CSS1039: Token not allowed after unary operator: '-img1' (580,107): run-time error CSS1039: Token not allowed after unary operator: '-g3' (580,151): run-time error CSS1039: Token not allowed after unary operator: '-img1' (583,98): run-time error CSS1039: Token not allowed after unary operator: '-img1' (592,52): run-time error CSS1039: Token not allowed after unary operator: '-line1' (595,54): run-time error CSS1039: Token not allowed after unary operator: '-line1' (595,78): run-time error CSS1039: Token not allowed after unary operator: '-line1' (597,24): run-time error CSS1039: Token not allowed after unary operator: '-com2' (597,43): run-time error CSS1039: Token not allowed after unary operator: '-com2' (598,86): run-time error CSS1039: Token not allowed after unary operator: '-img1' (604,88): run-time error CSS1039: Token not allowed after unary operator: '-img1' (609,43): run-time error CSS1039: Token not allowed after unary operator: '-header' (609,64): run-time error CSS1039: Token not allowed after unary operator: '-header' (609,89): run-time error CSS1039: Token not allowed after unary operator: '-g1' (621,37): run-time error CSS1039: Token not allowed after unary operator: '-img1' (632,180): run-time error CSS1039: Token not allowed after unary operator: '-line2' (632,215): run-time error CSS1039: Token not allowed after unary operator: '-g1' (639,49): run-time error CSS1039: Token not allowed after unary operator: '-g1' (639,70): run-time error CSS1039: Token not allowed after unary operator: '-g1' (641,85): run-time error CSS1039: Token not allowed after unary operator: '-font1' (641,150): run-time error CSS1039: Token not allowed after unary operator: '-line1' (644,102): run-time error CSS1039: Token not allowed after unary operator: '-font1' (644,202): run-time error CSS1039: Token not allowed after unary operator: '-g1' (652,80): run-time error CSS1039: Token not allowed after unary operator: '-g1' (652,118): run-time error CSS1039: Token not allowed after unary operator: '-g1' (653,94): run-time error CSS1039: Token not allowed after unary operator: '-g1' (678,84): run-time error CSS1039: Token not allowed after unary operator: '-com1' (678,123): run-time error CSS1039: Token not allowed after unary operator: '-primary-c1' (680,34): run-time error CSS1039: Token not allowed after unary operator: '-bg2' (680,51): run-time error CSS1039: Token not allowed after unary operator: '-g1' (692,65): run-time error CSS1039: Token not allowed after unary operator: '-g1' (694,27): run-time error CSS1039: Token not allowed after unary operator: '-font1' (694,52): run-time error CSS1039: Token not allowed after unary operator: '-com2' (694,110): run-time error CSS1039: Token not allowed after unary operator: '-line1' (695,110): run-time error CSS1039: Token not allowed after unary operator: '-line1' (696,31): run-time error CSS1039: Token not allowed after unary operator: '-line1' (697,64): run-time error CSS1039: Token not allowed after unary operator: '-g5' (697,104): run-time error CSS1039: Token not allowed after unary operator: '-g5' (697,120): run-time error CSS1039: Token not allowed after unary operator: '-line3' (698,63): run-time error CSS1039: Token not allowed after unary operator: '-primary-c1' (698,103): run-time error CSS1039: Token not allowed after unary operator: '-primary-c1' (702,158): run-time error CSS1039: Token not allowed after unary operator: '-img1' (704,51): run-time error CSS1039: Token not allowed after unary operator: '-line2' (706,149): run-time error CSS1039: Token not allowed after unary operator: '-img1' (711,160): run-time error CSS1039: Token not allowed after unary operator: '-g1' (713,27): run-time error CSS1039: Token not allowed after unary operator: '-font1' (713,52): run-time error CSS1039: Token not allowed after unary operator: '-com2' (713,94): run-time error CSS1039: Token not allowed after unary operator: '-line2' (715,144): run-time error CSS1039: Token not allowed after unary operator: '-img1' (722,77): run-time error CSS1039: Token not allowed after unary operator: '-g5' (723,50): run-time error CSS1039: Token not allowed after unary operator: '-line2' (724,50): run-time error CSS1039: Token not allowed after unary operator: '-line1' (725,50): run-time error CSS1039: Token not allowed after unary operator: '-line1' (725,74): run-time error CSS1039: Token not allowed after unary operator: '-line1' (726,34): run-time error CSS1039: Token not allowed after unary operator: '-g5' (726,74): run-time error CSS1039: Token not allowed after unary operator: '-g5' (728,27): run-time error CSS1039: Token not allowed after unary operator: '-font1' (728,57): run-time error CSS1039: Token not allowed after unary operator: '-com2' (733,71): run-time error CSS1039: Token not allowed after unary operator: '-g1' (737,56): run-time error CSS1039: Token not allowed after unary operator: '-font2' (742,113): run-time error CSS1039: Token not allowed after unary operator: '-img1' (751,108): run-time error CSS1039: Token not allowed after unary operator: '-img1' (758,77): run-time error CSS1039: Token not allowed after unary operator: '-g3' (759,105): run-time error CSS1039: Token not allowed after unary operator: '-img1' (764,61): run-time error CSS1039: Token not allowed after unary operator: '-space4' (767,151): run-time error CSS1039: Token not allowed after unary operator: '-img1' (782,106): run-time error CSS1039: Token not allowed after unary operator: '-img1' (791,181): run-time error CSS1039: Token not allowed after unary operator: '-g1' (793,60): run-time error CSS1039: Token not allowed after unary operator: '-img1' (832,65): run-time error CSS1039: Token not allowed after unary operator: '-font1' (833,100): run-time error CSS1039: Token not allowed after unary operator: '-font1' (833,124): run-time error CSS1039: Token not allowed after unary operator: '-line3' (844,74): run-time error CSS1039: Token not allowed after unary operator: '-space3' (846,63): run-time error CSS1039: Token not allowed after unary operator: '-space2' (888,45): run-time error CSS1039: Token not allowed after unary operator: '-com4' (889,61): run-time error CSS1039: Token not allowed after unary operator: '-bg2' (892,68): run-time error CSS1039: Token not allowed after unary operator: '-line3' (893,127): run-time error CSS1039: Token not allowed after unary operator: '-line3' (911,59): run-time error CSS1039: Token not allowed after unary operator: '-g4' (920,59): run-time error CSS1039: Token not allowed after unary operator: '-g4' (924,58): run-time error CSS1039: Token not allowed after unary operator: '-font1' (924,88): run-time error CSS1039: Token not allowed after unary operator: '-com2' (924,131): run-time error CSS1039: Token not allowed after unary operator: '-line2' (925,89): run-time error CSS1039: Token not allowed after unary operator: '-g1' (927,58): run-time error CSS1039: Token not allowed after unary operator: '-b1' (930,63): run-time error CSS1039: Token not allowed after unary operator: '-line1' (930,93): run-time error CSS1039: Token not allowed after unary operator: '-line1' (933,29): run-time error CSS1039: Token not allowed after unary operator: '-space1' (947,107): run-time error CSS1039: Token not allowed after unary operator: '-font1' (948,62): run-time error CSS1039: Token not allowed after unary operator: '-g1' (949,52): run-time error CSS1039: Token not allowed after unary operator: '-g1' (950,136): run-time error CSS1039: Token not allowed after unary operator: '-g1' (954,114): run-time error CSS1039: Token not allowed after unary operator: '-img1' (956,134): run-time error CSS1039: Token not allowed after unary operator: '-g1' (979,47): run-time error CSS1039: Token not allowed after unary operator: '-font2' (982,115): run-time error CSS1039: Token not allowed after unary operator: '-space3' (985,63): run-time error CSS1039: Token not allowed after unary operator: '-g1' (985,79): run-time error CSS1039: Token not allowed after unary operator: '-g1' (986,68): run-time error CSS1039: Token not allowed after unary operator: '-g1' (992,78): run-time error CSS1039: Token not allowed after unary operator: '-g1' (1008,111): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1011,125): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1039,101): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1051,36): run-time error CSS1039: Token not allowed after unary operator: '-g3' (1052,37): run-time error CSS1039: Token not allowed after unary operator: '-g3' (1053,41): run-time error CSS1039: Token not allowed after unary operator: '-g3' (1054,27): run-time error CSS1039: Token not allowed after unary operator: '-g3' (1056,112): run-time error CSS1039: Token not allowed after unary operator: '-font1' (1056,142): run-time error CSS1039: Token not allowed after unary operator: '-com2' (1056,170): run-time error CSS1039: Token not allowed after unary operator: '-g1' (1056,213): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1060,76): run-time error CSS1039: Token not allowed after unary operator: '-font1' (1062,85): run-time error CSS1039: Token not allowed after unary operator: '-g5' (1063,90): run-time error CSS1039: Token not allowed after unary operator: '-g3' (1063,106): run-time error CSS1039: Token not allowed after unary operator: '-g3' (1064,103): run-time error CSS1039: Token not allowed after unary operator: '-invalid' (1065,92): run-time error CSS1039: Token not allowed after unary operator: '-g1' (1065,108): run-time error CSS1039: Token not allowed after unary operator: '-g1' (1069,37): run-time error CSS1039: Token not allowed after unary operator: '-com2' (1072,55): run-time error CSS1039: Token not allowed after unary operator: '-g1' (1074,37): run-time error CSS1039: Token not allowed after unary operator: '-com4' (1078,61): run-time error CSS1039: Token not allowed after unary operator: '-g1' (1078,114): run-time error CSS1039: Token not allowed after unary operator: '-font1' (1078,144): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1079,89): run-time error CSS1039: Token not allowed after unary operator: '-g1' (1080,56): run-time error CSS1039: Token not allowed after unary operator: '-g5' (1080,100): run-time error CSS1039: Token not allowed after unary operator: '-g3' (1080,116): run-time error CSS1039: Token not allowed after unary operator: '-g3' (1081,64): run-time error CSS1039: Token not allowed after unary operator: '-invalid' (1089,180): run-time error CSS1039: Token not allowed after unary operator: '-font1' (1089,237): run-time error CSS1039: Token not allowed after unary operator: '-g1' (1093,68): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1095,93): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1096,67): run-time error CSS1039: Token not allowed after unary operator: '-g1' (1097,54): run-time error CSS1039: Token not allowed after unary operator: '-g3' (1098,68): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1098,98): run-time error CSS1039: Token not allowed after unary operator: '-g5' (1100,78): run-time error CSS1039: Token not allowed after unary operator: '-g1' (1101,87): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1102,100): run-time error CSS1039: Token not allowed after unary operator: '-img1' (1103,82): run-time error CSS1039: Token not allowed after unary operator: '-g1' (1104,91): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1120,37): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1121,91): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1121,142): run-time error CSS1039: Token not allowed after unary operator: '-com2' (1122,71): run-time error CSS1039: Token not allowed after unary operator: '-g1' (1123,56): run-time error CSS1039: Token not allowed after unary operator: '-g1' (1123,79): run-time error CSS1039: Token not allowed after unary operator: '-g1' (1124,57): run-time error CSS1039: Token not allowed after unary operator: '-g5' (1125,67): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1125,91): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1132,58): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1133,102): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1166,73): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1167,51): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1172,51): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1177,58): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1181,58): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1185,60): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1189,58): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1194,71): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1196,115): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1205,87): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1208,124): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1215,91): run-time error CSS1039: Token not allowed after unary operator: '-g3' (1217,107): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1218,115): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1220,66): run-time error CSS1039: Token not allowed after unary operator: '-g1' (1220,89): run-time error CSS1039: Token not allowed after unary operator: '-g1' (1221,122): run-time error CSS1039: Token not allowed after unary operator: '-img1' (1223,81): run-time error CSS1039: Token not allowed after unary operator: '-g5' (1224,75): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1224,101): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1238,96): run-time error CSS1039: Token not allowed after unary operator: '-font1' (1238,121): run-time error CSS1039: Token not allowed after unary operator: '-com2' (1238,139): run-time error CSS1039: Token not allowed after unary operator: '-g1' (1239,116): run-time error CSS1039: Token not allowed after unary operator: '-g1' (1240,126): run-time error CSS1039: Token not allowed after unary operator: '-img1' (1251,34): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1254,132): run-time error CSS1039: Token not allowed after unary operator: '-com2' (1254,172): run-time error CSS1039: Token not allowed after unary operator: '-line2' (1257,73): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1258,47): run-time error CSS1039: Token not allowed after unary operator: '-form1' (1260,162): run-time error CSS1039: Token not allowed after unary operator: '-font1' (1261,149): run-time error CSS1039: Token not allowed after unary operator: '-img1' (1262,99): run-time error CSS1039: Token not allowed after unary operator: '-line1' (1265,70): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1267,91): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1276,159): run-time error CSS1039: Token not allowed after unary operator: '-img1' (1279,63): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1294,113): run-time error CSS1039: Token not allowed after unary operator: '-com2' (1304,58): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1311,58): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1347,67): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1354,99): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1367,52): run-time error CSS1039: Token not allowed after unary operator: '-font2' (1368,91): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1373,65): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1376,52): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1393,52): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1394,32): run-time error CSS1039: Token not allowed after unary operator: '-g3' (1408,57): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1410,72): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1411,107): run-time error CSS1039: Token not allowed after unary operator: '-com2' (1428,42): run-time error CSS1039: Token not allowed after unary operator: '-com2' (1447,48): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1451,60): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1468,56): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1469,70): run-time error CSS1039: Token not allowed after unary operator: '-com2' (1487,52): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1516,124): run-time error CSS1039: Token not allowed after unary operator: '-img1' (1527,48): run-time error CSS1039: Token not allowed after unary operator: '-g3' (1527,68): run-time error CSS1039: Token not allowed after unary operator: '-font2' (1532,105): run-time error CSS1039: Token not allowed after unary operator: '-com2' (1544,128): run-time error CSS1039: Token not allowed after unary operator: '-img1' (1559,42): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1564,97): run-time error CSS1039: Token not allowed after unary operator: '-com2' (1596,61): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1611,89): run-time error CSS1039: Token not allowed after unary operator: '-space2' (1611,150): run-time error CSS1039: Token not allowed after unary operator: '-g4' (1613,47): run-time error CSS1039: Token not allowed after unary operator: '-com2' (1616,67): run-time error CSS1039: Token not allowed after unary operator: '-line2' (1618,52): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1623,85): run-time error CSS1039: Token not allowed after unary operator: '-com2' (1691,83): run-time error CSS1039: Token not allowed after unary operator: '-font2' (1693,86): run-time error CSS1039: Token not allowed after unary operator: '-g4' (1694,86): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1712,89): run-time error CSS1039: Token not allowed after unary operator: '-space1' (1715,27): run-time error CSS1039: Token not allowed after unary operator: '-space4' (1733,74): run-time error CSS1039: Token not allowed after unary operator: '-com2' (1742,49): run-time error CSS1039: Token not allowed after unary operator: '-line1' (1742,89): run-time error CSS1039: Token not allowed after unary operator: '-line1' (1754,41): run-time error CSS1039: Token not allowed after unary operator: '-space1' (1756,61): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1763,66): run-time error CSS1039: Token not allowed after unary operator: '-com2' (1801,26): run-time error CSS1039: Token not allowed after unary operator: '-bg1' (1801,45): run-time error CSS1039: Token not allowed after unary operator: '-space4' (1804,31): run-time error CSS1039: Token not allowed after unary operator: '-space4' (1811,26): run-time error CSS1039: Token not allowed after unary operator: '-font1' (1816,133): run-time error CSS1039: Token not allowed after unary operator: '-img1' (1824,26): run-time error CSS1039: Token not allowed after unary operator: '-font1' (1825,29): run-time error CSS1039: Token not allowed after unary operator: '-g1' (1842,143): run-time error CSS1039: Token not allowed after unary operator: '-com2' (1845,75): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1864,127): run-time error CSS1039: Token not allowed after unary operator: '-g2' (1883,43): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1884,48): run-time error CSS1039: Token not allowed after unary operator: '-primary-c1' (1885,44): run-time error CSS1039: Token not allowed after unary operator: '-primary-c3' (1897,62): run-time error CSS1039: Token not allowed after unary operator: '-font1' (1898,37): run-time error CSS1039: Token not allowed after unary operator: '-primary-c3' (1910,128): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1919,51): run-time error CSS1039: Token not allowed after unary operator: '-line2' (1925,41): run-time error CSS1039: Token not allowed after unary operator: '-space3' (1929,126): run-time error CSS1039: Token not allowed after unary operator: '-space4' (1929,160): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1929,184): run-time error CSS1039: Token not allowed after unary operator: '-bg1' (1930,120): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1934,53): run-time error CSS1039: Token not allowed after unary operator: '-primary-c2' (1935,53): run-time error CSS1039: Token not allowed after unary operator: '-primary-c3' (1936,85): run-time error CSS1039: Token not allowed after unary operator: '-font1' (1937,132): run-time error CSS1039: Token not allowed after unary operator: '-line2' (1937,172): run-time error CSS1039: Token not allowed after unary operator: '-line2' (1938,53): run-time error CSS1039: Token not allowed after unary operator: '-g1' (1941,56): run-time error CSS1039: Token not allowed after unary operator: '-line1' (1954,66): run-time error CSS1039: Token not allowed after unary operator: '-font1' (1960,48): run-time error CSS1039: Token not allowed after unary operator: '-line1' (1960,88): run-time error CSS1039: Token not allowed after unary operator: '-line1' (1961,67): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1968,61): run-time error CSS1039: Token not allowed after unary operator: '-space1' (1968,99): run-time error CSS1039: Token not allowed after unary operator: '-space1' (1972,29): run-time error CSS1039: Token not allowed after unary operator: '-space1' (1977,40): run-time error CSS1039: Token not allowed after unary operator: '-space1' (1979,90): run-time error CSS1039: Token not allowed after unary operator: '-space1' (1980,128): run-time error CSS1039: Token not allowed after unary operator: '-line3' (1985,56): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2001,77): run-time error CSS1039: Token not allowed after unary operator: '-line1' (2002,147): run-time error CSS1039: Token not allowed after unary operator: '-font1' (2002,177): run-time error CSS1039: Token not allowed after unary operator: '-font1' (2003,60): run-time error CSS1039: Token not allowed after unary operator: '-line3' (2004,122): run-time error CSS1039: Token not allowed after unary operator: '-line1' (2007,56): run-time error CSS1039: Token not allowed after unary operator: '-line3' (2018,68): run-time error CSS1039: Token not allowed after unary operator: '-line3' (2021,45): run-time error CSS1039: Token not allowed after unary operator: '-space2' (2036,55): run-time error CSS1039: Token not allowed after unary operator: '-line3' (2039,73): run-time error CSS1039: Token not allowed after unary operator: '-g4' (2045,60): run-time error CSS1039: Token not allowed after unary operator: '-line1' (2046,76): run-time error CSS1039: Token not allowed after unary operator: '-line3' (2058,88): run-time error CSS1039: Token not allowed after unary operator: '-line1' (2070,109): run-time error CSS1039: Token not allowed after unary operator: '-font1' (2078,59): run-time error CSS1039: Token not allowed after unary operator: '-line3' (2080,79): run-time error CSS1039: Token not allowed after unary operator: '-line3' (2081,141): run-time error CSS1039: Token not allowed after unary operator: '-com2' (2081,163): run-time error CSS1039: Token not allowed after unary operator: '-font1' (2084,87): run-time error CSS1039: Token not allowed after unary operator: '-bg2' (2086,50): run-time error CSS1039: Token not allowed after unary operator: '-line3' (2088,56): run-time error CSS1039: Token not allowed after unary operator: '-line3' (2093,60): run-time error CSS1039: Token not allowed after unary operator: '-com2' (2094,79): run-time error CSS1039: Token not allowed after unary operator: '-line3' (2112,73): run-time error CSS1039: Token not allowed after unary operator: '-g4' (2119,58): run-time error CSS1039: Token not allowed after unary operator: '-space4' (2125,162): run-time error CSS1039: Token not allowed after unary operator: '-line3' (2130,101): run-time error CSS1039: Token not allowed after unary operator: '-line3' (2196,154): run-time error CSS1039: Token not allowed after unary operator: '-line3' (2215,27): run-time error CSS1039: Token not allowed after unary operator: '-bg2' (2215,53): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2217,93): run-time error CSS1039: Token not allowed after unary operator: '-space3' (2217,140): run-time error CSS1039: Token not allowed after unary operator: '-com2' (2220,38): run-time error CSS1039: Token not allowed after unary operator: '-space3' (2260,104): run-time error CSS1039: Token not allowed after unary operator: '-line3' (2263,50): run-time error CSS1039: Token not allowed after unary operator: '-g3' (2266,67): run-time error CSS1039: Token not allowed after unary operator: '-g3' (2275,67): run-time error CSS1039: Token not allowed after unary operator: '-g4' (2279,128): run-time error CSS1039: Token not allowed after unary operator: '-g3' (2283,81): run-time error CSS1039: Token not allowed after unary operator: '-g4' (2284,81): run-time error CSS1039: Token not allowed after unary operator: '-line2' (2288,31): run-time error CSS1039: Token not allowed after unary operator: '-space3' (2298,75): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2298,109): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2317,75): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2317,105): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2331,62): run-time error CSS1039: Token not allowed after unary operator: '-space4' (2331,93): run-time error CSS1039: Token not allowed after unary operator: '-line3' (2335,63): run-time error CSS1039: Token not allowed after unary operator: '-font1' (2338,60): run-time error CSS1039: Token not allowed after unary operator: '-primary-c3' (2355,48): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2359,43): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2363,64): run-time error CSS1039: Token not allowed after unary operator: '-space4' (2363,84): run-time error CSS1039: Token not allowed after unary operator: '-space4' (2373,100): run-time error CSS1039: Token not allowed after unary operator: '-font1' (2420,59): run-time error CSS1039: Token not allowed after unary operator: '-bg2' (2421,58): run-time error CSS1039: Token not allowed after unary operator: '-img1' (2442,52): run-time error CSS1039: Token not allowed after unary operator: '-line3' (2443,72): run-time error CSS1039: Token not allowed after unary operator: '-font1' (2452,64): run-time error CSS1039: Token not allowed after unary operator: '-font1' (2533,121): run-time error CSS1039: Token not allowed after unary operator: '-img1' (2550,74): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2551,83): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2552,69): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2559,150): run-time error CSS1039: Token not allowed after unary operator: '-line2' (2561,70): run-time error CSS1039: Token not allowed after unary operator: '-g3' (2564,73): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2568,56): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2568,71): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2581,67): run-time error CSS1039: Token not allowed after unary operator: '-space4' (2588,72): run-time error CSS1039: Token not allowed after unary operator: '-space4' (2588,96): run-time error CSS1039: Token not allowed after unary operator: '-space4' (2590,85): run-time error CSS1039: Token not allowed after unary operator: '-space4' (2590,109): run-time error CSS1039: Token not allowed after unary operator: '-space4' (2590,123): run-time error CSS1039: Token not allowed after unary operator: '-space4' (2592,50): run-time error CSS1039: Token not allowed after unary operator: '-space4' (2613,67): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2620,241): run-time error CSS1039: Token not allowed after unary operator: '-g5' (2620,269): run-time error CSS1039: Token not allowed after unary operator: '-line2' (2620,309): run-time error CSS1039: Token not allowed after unary operator: '-g3' (2625,55): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2625,86): run-time error CSS1039: Token not allowed after unary operator: '-line3' (2630,40): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2638,84): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2639,51): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2644,41): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2649,81): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2657,68): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2661,100): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2665,86): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2666,80): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2668,41): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2688,65): run-time error CSS1039: Token not allowed after unary operator: '-com2' (2690,102): run-time error CSS1039: Token not allowed after unary operator: '-com2' (2691,145): run-time error CSS1039: Token not allowed after unary operator: '-com2' (2695,80): run-time error CSS1039: Token not allowed after unary operator: '-space1' (2709,178): run-time error CSS1039: Token not allowed after unary operator: '-line2' (2710,90): run-time error CSS1039: Token not allowed after unary operator: '-g1' (2714,160): run-time error CSS1039: Token not allowed after unary operator: '-img1' (2726,210): run-time error CSS1039: Token not allowed after unary operator: '-g1' (2728,70): run-time error CSS1039: Token not allowed after unary operator: '-g1' (2732,137): run-time error CSS1039: Token not allowed after unary operator: '-g1' (2759,173): run-time error CSS1039: Token not allowed after unary operator: '-img1' (2766,79): run-time error CSS1039: Token not allowed after unary operator: '-g1' (2768,80): run-time error CSS1039: Token not allowed after unary operator: '-g1' (2770,92): run-time error CSS1039: Token not allowed after unary operator: '-g1' (2824,82): run-time error CSS1039: Token not allowed after unary operator: '-g1' (2825,105): run-time error CSS1039: Token not allowed after unary operator: '-line2' (2827,80): run-time error CSS1039: Token not allowed after unary operator: '-line2' (2829,153): run-time error CSS1039: Token not allowed after unary operator: '-g1' (2830,106): run-time error CSS1039: Token not allowed after unary operator: '-g3' (2831,75): run-time error CSS1039: Token not allowed after unary operator: '-primary-c1' (2833,104): run-time error CSS1039: Token not allowed after unary operator: '-g3' (2836,77): run-time error CSS1039: Token not allowed after unary operator: '-line2' (2848,54): run-time error CSS1039: Token not allowed after unary operator: '-com2' (2848,73): run-time error CSS1039: Token not allowed after unary operator: '-com2' (2848,97): run-time error CSS1039: Token not allowed after unary operator: '-com2' (2848,139): run-time error CSS1039: Token not allowed after unary operator: '-line2' (2849,103): run-time error CSS1039: Token not allowed after unary operator: '-com2' (2852,119): run-time error CSS1039: Token not allowed after unary operator: '-g3' (2864,73): run-time error CSS1039: Token not allowed after unary operator: '-g1' (2866,85): run-time error CSS1039: Token not allowed after unary operator: '-line3' (2868,71): run-time error CSS1039: Token not allowed after unary operator: '-line3' (2870,176): run-time error CSS1039: Token not allowed after unary operator: '-g1' (2872,82): run-time error CSS1039: Token not allowed after unary operator: '-g1' (2875,94): run-time error CSS1039: Token not allowed after unary operator: '-g1' (2892,71): run-time error CSS1039: Token not allowed after unary operator: '-com2' (2899,116): run-time error CSS1039: Token not allowed after unary operator: '-g1' (2900,115): run-time error CSS1039: Token not allowed after unary operator: '-g3' (2919,69): run-time error CSS1039: Token not allowed after unary operator: '-com2' (2920,69): run-time error CSS1039: Token not allowed after unary operator: '-com2' (2959,105): run-time error CSS1039: Token not allowed after unary operator: '-font1' (2959,143): run-time error CSS1039: Token not allowed after unary operator: '-g1' (2960,62): run-time error CSS1039: Token not allowed after unary operator: '-line3' (2963,52): run-time error CSS1039: Token not allowed after unary operator: '-g3' (2976,190): run-time error CSS1039: Token not allowed after unary operator: '-line3' (2976,230): run-time error CSS1039: Token not allowed after unary operator: '-g3' (2995,202): run-time error CSS1039: Token not allowed after unary operator: '-font1' (3007,169): run-time error CSS1039: Token not allowed after unary operator: '-img1' (3017,122): run-time error CSS1039: Token not allowed after unary operator: '-font1' (3021,192): run-time error CSS1039: Token not allowed after unary operator: '-g3' (3034,78): run-time error CSS1039: Token not allowed after unary operator: '-line2' (3040,57): run-time error CSS1039: Token not allowed after unary operator: '-line3' (3049,32): run-time error CSS1039: Token not allowed after unary operator: '-space4' (3083,40): run-time error CSS1039: Token not allowed after unary operator: '-space4' (3113,46): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3123,53): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3123,88): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3134,87): run-time error CSS1039: Token not allowed after unary operator: '-img1' (3144,48): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3144,64): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3151,86): run-time error CSS1039: Token not allowed after unary operator: '-g1' (3155,89): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3155,105): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3157,52): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3157,68): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3157,114): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3174,30): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3175,48): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3175,64): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3178,52): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3178,68): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3178,105): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3178,126): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3190,42): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3190,77): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3191,51): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3200,27): run-time error CSS1039: Token not allowed after unary operator: '-space4' (3204,96): run-time error CSS1039: Token not allowed after unary operator: '-space4' (3209,54): run-time error CSS1039: Token not allowed after unary operator: '-space4' (3213,35): run-time error CSS1039: Token not allowed after unary operator: '-space4' (3242,89): run-time error CSS1039: Token not allowed after unary operator: '-space4' (3291,82): run-time error CSS1039: Token not allowed after unary operator: '-line1' (3291,122): run-time error CSS1039: Token not allowed after unary operator: '-line1' (3292,108): run-time error CSS1039: Token not allowed after unary operator: '-bg1' (3317,79): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3324,63): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3325,98): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3329,62): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3329,82): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3334,95): run-time error CSS1039: Token not allowed after unary operator: '-g3' (3338,103): run-time error CSS1039: Token not allowed after unary operator: '-g3' (3363,112): run-time error CSS1039: Token not allowed after unary operator: '-g1' (3363,122): run-time error CSS1039: Token not allowed after unary operator: '-img1' (3364,89): run-time error CSS1039: Token not allowed after unary operator: '-line2' (3388,43): run-time error CSS1039: Token not allowed after unary operator: '-line1' (3389,74): run-time error CSS1039: Token not allowed after unary operator: '-font1' (3389,130): run-time error CSS1039: Token not allowed after unary operator: '-line3' (3393,141): run-time error CSS1039: Token not allowed after unary operator: '-g1' (3412,59): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3413,32): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3414,48): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3423,51): run-time error CSS1039: Token not allowed after unary operator: '-com2' (3475,138): run-time error CSS1039: Token not allowed after unary operator: '-b1' (3476,120): run-time error CSS1039: Token not allowed after unary operator: '-img1' (3477,116): run-time error CSS1039: Token not allowed after unary operator: '-line1' (3477,156): run-time error CSS1039: Token not allowed after unary operator: '-line1' (3478,119): run-time error CSS1039: Token not allowed after unary operator: '-line1' (3478,159): run-time error CSS1039: Token not allowed after unary operator: '-line1' (3479,76): run-time error CSS1039: Token not allowed after unary operator: '-line1' (3480,82): run-time error CSS1039: Token not allowed after unary operator: '-line1' (3481,68): run-time error CSS1039: Token not allowed after unary operator: '-line1' (3482,101): run-time error CSS1039: Token not allowed after unary operator: '-line1' (3483,89): run-time error CSS1039: Token not allowed after unary operator: '-line3' (3483,130): run-time error CSS1039: Token not allowed after unary operator: '-line3' (3484,109): run-time error CSS1039: Token not allowed after unary operator: '-line3' (3487,111): run-time error CSS1039: Token not allowed after unary operator: '-line3' (3487,152): run-time error CSS1039: Token not allowed after unary operator: '-line3' (3509,120): run-time error CSS1039: Token not allowed after unary operator: '-img1' (3512,73): run-time error CSS1039: Token not allowed after unary operator: '-g4' (3515,29): run-time error CSS1039: Token not allowed after unary operator: '-font1' (3520,59): run-time error CSS1039: Token not allowed after unary operator: '-g1' (3544,50): run-time error CSS1039: Token not allowed after unary operator: '-bg1' (3548,107): run-time error CSS1039: Token not allowed after unary operator: '-img1' (3634,84): run-time error CSS1039: Token not allowed after unary operator: '-line1' (3635,74): run-time error CSS1039: Token not allowed after unary operator: '-img1' (3637,47): run-time error CSS1039: Token not allowed after unary operator: '-font1' (3650,59): run-time error CSS1039: Token not allowed after unary operator: '-line3' (3659,51): run-time error CSS1039: Token not allowed after unary operator: '-primary-c3' (3672,48): run-time error CSS1039: Token not allowed after unary operator: '-space3' (3673,40): run-time error CSS1039: Token not allowed after unary operator: '-primary-c3' (3686,76): run-time error CSS1039: Token not allowed after unary operator: '-line3' (3690,67): run-time error CSS1039: Token not allowed after unary operator: '-line3' (3694,64): run-time error CSS1039: Token not allowed after unary operator: '-line3' (3694,92): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3718,101): run-time error CSS1039: Token not allowed after unary operator: '-primary-c1' (3718,125): run-time error CSS1039: Token not allowed after unary operator: '-g1' (3718,162): run-time error CSS1039: Token not allowed after unary operator: '-line3' (3736,82): run-time error CSS1039: Token not allowed after unary operator: '-space1' (3740,68): run-time error CSS1039: Token not allowed after unary operator: '-font2' (3740,98): run-time error CSS1039: Token not allowed after unary operator: '-header' (3742,79): run-time error CSS1039: Token not allowed after unary operator: '-primary-c1' (3745,43): run-time error CSS1039: Token not allowed after unary operator: '-line1' (3748,77): run-time error CSS1039: Token not allowed after unary operator: '-line3' (3748,115): run-time error CSS1039: Token not allowed after unary operator: '-line3' (3755,80): run-time error CSS1039: Token not allowed after unary operator: '-primary-c3' (3755,125): run-time error CSS1039: Token not allowed after unary operator: '-primary-c3' (3760,119): run-time error CSS1039: Token not allowed after unary operator: '-g3' (3763,104): run-time error CSS1039: Token not allowed after unary operator: '-g3' (3765,158): run-time error CSS1039: Token not allowed after unary operator: '-primary-c1' (3766,184): run-time error CSS1039: Token not allowed after unary operator: '-primary-c3' (3766,208): run-time error CSS1039: Token not allowed after unary operator: '-g1' (3789,111): run-time error CSS1039: Token not allowed after unary operator: '-line3' (3791,110): run-time error CSS1039: Token not allowed after unary operator: '-color-gray4' (3793,85): run-time error CSS1039: Token not allowed after unary operator: '-color-gray4' (3797,148): run-time error CSS1039: Token not allowed after unary operator: '-color-gray0' (3797,222): run-time error CSS1039: Token not allowed after unary operator: '-line3' (3801,74): run-time error CSS1039: Token not allowed after unary operator: '-line2' (3801,114): run-time error CSS1039: Token not allowed after unary operator: '-line2' (3802,85): run-time error CSS1039: Token not allowed after unary operator: '-g4' */ @charset "utf-8"; @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css"); @import url('https://hangeul.pstatic.net/hangeul_static/css/nanum-square-neo.css'); :root { --header : 7.5rem; --primary-c1:#899AF6; --primary-c1-sub:#D8DAEE; --primary-c2:#0A091B; --primary-c2-sub:#F6F7FA; --primary-c3:#C29D57; --invalid:#FF684B; --space1 : 7.0rem; /* 기본박스여백 */ --space2 : 5.0rem; /* 섹션간여백 */ --space3 : 1.0rem; --space4 : 7.0rem; /* 기본박스여백 */ --com1 : 7.0rem; --com2 : 4.9rem; --com3 : 4.5rem; --com4 : 6.7rem; --g1 : #0A091B; --g2 : #858998; --g3 : #9fa4bf; --g4 : #EDEFF3; --g5 : #F1F3F7; --bg1 : var(--g4); --bg2 : var(--g5); --line1 : #0A091B; --line2 : #858998; --line3 : #CED1D9; --font1 : 1.6rem; --font2 : 1.4rem; --img1:url(../../images/com/set1.png?20240826) no-repeat 0 0 / 48.0rem 48.0rem; } /* 여백 */ @media only screen and (max-width:1920px){ :root { --space1 : 7.0rem; } } @media only screen and (max-width:1680px){ :root { --space1 : 5.0rem; --space4 : 5.0rem; } } @media only screen and (max-width:1280px){ :root { --space1 : 2.0rem; } } /* MOBILE UI 분기점 */ @media only screen and (max-width:983px){ :root { --header : 6.2rem; --com2 : 4.5rem; --com4 : 6.4rem; --font1 : 1.4rem; --font2 : 1.3rem; --space1 : 2.0rem; --space2 : 3.0rem; --space3 : 0.7rem; --space4 : 2.0rem; } /* 추후 터치기반으로 변경예정 */ body {-webkit-user-select:none;user-select:none;} } @media only screen and (min-width:768px) { [data-ui-width="mb"] {display:none !important;} } @media only screen and (max-width:767px) { [data-ui-width="pc"] {display:none !important;} } /* -------------------------------------------------------------------------------- RESET --------------------------------------------------------------------------------- */ html, body, div, span, object, iframe, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, summary, h1, h2, h3, h4, h5, h6, p, blockquote, pre, form, fieldset, legend, input, label, button, textarea, select, textarea, input, data, table, caption, tbody, tfoot, thead, tr, th, td, b, i, dl, dt, dd, ol, ul, li, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, time, mark, audio, video, a {margin:0;padding:0;box-sizing:border-box;} html {font-size:62.5%;-webkit-overflow-scrollng:touch;} html, body {width:100%;height:100%;} body {background:var(--bg1);color:var(--g1);word-wrap:break-word;word-break:normal;word-break:keep-all;-ms-text-size-adjust:100%;-webkit-test-size-adjust:100%;font-variant-numeric:tabular-nums;} body, select, input, button, textarea, button, pre {font-family:'Pretendard', 'Mulgun Gothic', -apple-system, BlinkMacSystemfont, AppleSDGothicNeo-Regular, sans-serif;font-size:var(--font1);line-height:1.6;letter-spacing:-0.055rem;font-weight:500;} article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, summary {display:block;} blockquote, q {quotes:none;} blockquote::before, blockquote::after, q::before, q::after {content:none;} @media only screen and (max-width:360px){ html {font-size:50%;} } h1, h2, h3, h4, h5, h6 {font-size:100%;font-weight:900;} cite, em, dfn, address {font-style:normal;} fieldset, iframe {border:0 none;} fieldset {min-width:0;} ins {text-decoration:none;} del {text-decoration:line-through;} ol, ul, li {list-style:none;} img, fieldset, iframe {border:0 none;} video, audio, object, embed, iframe {max-width:100%;} legend:not([class]), caption {/*position:absolute;*/overflow:hidden;width:0.1rem;height:0.1rem;margin:-0.1rem 0 0 -0.1rem;font-size:0.1rem;opacity:0;white-space:nowrap;} legend:not([class]) {position:absolute;} i, em, address {font-style:normal;} input, select, textarea {border:1px solid var(--line3);color:var(--g1);border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;} label, button {cursor:pointer;} button {cursor:pointer;padding:0;background:none;border:0 none;} select::-ms-expand {display:none;} textarea {resize:vertical;} input[type="text"]::-ms-clear, input[type="password"]::-ms-clear, input[type="text"]::-ms-reveal, input[type="password"]::-ms-reveal {display:none;} input[type="radio"], input[type="checkbox"], input[type="tel"], input[type="number"] {border:0 none;vertical-align:middle;} input[type="number"] {-moz-appearace:textfield;} input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {-webkit-appearance:none;} input[type="file"]::-webkit-file-upload-button {cursor:pointer;} input::-ms-clear {display:none;width:0;height:0;} table {width:100%;empty-cells:show;border-collapse:separate;border-spacing:0;table-layout:fixed;} table th {font-weight:500;} mark {background:none;} sup {vertical-align:top;} a {color:inherit;text-decoration:none;outline:0;} [role="button"], [role="tab"] {cursor:pointer;} [role="button"] span {pointer-events:none;} [disabled], [aria-disabled="true"] {cursor:default;} [tabindex]:focus-visible, a:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible {outline:1px dotted var(--g3);} input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus {background-color:transparent;transition:background-color 5000s ease-in-out 0s;} .hide {overflow:hidden;position:absolute;left:-0.1rem;top:-0.1rem;width:0.1rem;height:0.1rem;opacity:0;} .none {display:none;} /* -------------------------------------------------------------------------------- LAYOUT --------------------------------------------------------------------------------- */ html {overflow-y:scroll;--vw:100vw;} body.modal-on {position:fixed;width:100%;} .nav-skip a {overflow:hidden;display:block;position:absolute;left:0;right:0;top:0;width:100%;font-size:var(--font1);line-height:var(--header);text-align:center;opacity:0;z-index:-1;} .nav-skip a:focus {z-index:500;opacity:1;background:var(--primary-c1);color:#fff;} #wrapper {width:100%;min-height:100vh;background:var(--bg1);} body[data-page="sub"] #wrapper {background:#fff;} /* -------------------------------------------------------------------------------- LAYOUT : HEADER : #header --------------------------------------------------------------------------------- */ #header {position:sticky;top:0;height:var(--header);padding:0 var(--space1);background:var(--g1);z-index:100;font-family:'NanumSquareNeo';} #header:after {content:'';position:absolute;left:0;right:0;top:100%;height:0.5rem;background:transparent linear-gradient(0deg, #85899500 0%, #858995 100%) 0% 0% no-repeat padding-box;opacity:0.2;} #header .logo {color:#fff;line-height:var(--header);white-space:nowrap;} #header .logo, #header .logo > a, #header .logo > span {display:flex;align-items:center;} #header .logo > a + a, #header .logo > span + span {margin:0 0 0 0.5rem;} #header .logo > :nth-child(1):before {content:'';background:url(../../images/com/logo_sfac1.svg) no-repeat 0 0 / 100% 100%;} #header > div {display:flex;justify-content:space-between;align-items:center;max-width:190.8rem;margin:0 auto;} .nav-menu ul {font-size:1.6rem;} @media only screen and (min-width:984px){ #header .logo {font-size:2.0rem;} #header .logo > :nth-child(1):before {width:6.8rem;height:3.5rem;margin:0 1.5rem 0 0;} #header:before {content:'';position:absolute;left:0;right:0;top:100%;height:0;background:#fff;transition:all 0.3s ease-in-out;} #header [data-btn="menu-on"], #header [data-btn="menu-off"] {display:none;} .nav-menu nav {display:flex;align-items:center;white-space:nowrap;} .nav-menu nav > ul > li {position:relative;display:inline-block;} .nav-menu nav > ul > li > a {display:block;position:relative;padding:0 2.0rem;font-size:1.6rem;line-height:7.5rem;font-family:'NanumSquareNeoBold';color:#fff;} .nav-menu nav > ul > li > a:before {content:'';display:block;position:absolute;left:2.0rem;right:2.0rem;bottom:0;height:0;background:transparent;transition:all 0.3s ease-in-out;} /*.nav-menu nav > ul > li > a[aria-current="page"] {color:var(--primary-c1);}*/ .nav-menu nav > ul > li > ul {position:absolute;left:50%;top:70%;visibility:hidden;opacity:0;transform:translateX(-50%);transition:all 0.2s ease-in-out;} .nav-menu nav > ul > li > ul > li {display:inline-block;font-size:1.6rem;line-height:7.5rem;font-weight:700;} .nav-menu nav > ul > li > ul > li a {display:block;padding:0 2.0rem;font-family:'NanumSquareNeoExtraBold';} .nav-menu nav > ul > li > ul > li a:hover, .nav-menu nav > ul > li > ul > li a:focus {color:var(--primary-c1);} .nav-menu nav > ul > li.on > ul {visibility:visible;opacity:1;top:100%;} .nav-menu nav > ul > li.on > a:before {height:0.5rem;background:var(--primary-c1);} .nav-menu nav > ul + div {margin:0 0 0 5.0rem;display:flex;gap:0 5.0rem;} .nav-menu nav > ul + div .btn-t1:hover, .nav-menu nav > ul + div .btn-t1:focus {color:#fff;} #header[data-uimode="menuon"]:before {height:7.5rem;box-shadow:0.1rem 0.1rem 0.5rem #ACB1C080;} #header[data-uimode="menuon"] .nav-menu nav > ul > li > ul {top:100%;transition-delay:0.1s;} } @media only screen and (max-width:983px){ #header .logo {font-size:1.6rem;} #header .logo > :nth-child(1):before {width:4.2rem;height:2.2rem;margin:0 1.0rem 0 0;} #header [data-btn="menu-on"] {right:calc(var(--space1) * -1);} #header [data-btn="menu-off"] {display:none;position:fixed;top:0;right:0;} .nav-menu {visibility:hidden;position:fixed;left:0;right:0;top:var(--header);bottom:0;background:rgba(0,0,0,0);overflow:hidden;transition:all 0.3s ease-in-out;z-index:-200;} .nav-menu nav {position:absolute;right:0;top:0;bottom:0;padding:4.0rem;background:#fff;height:100%;width:calc(100vw - 7.2rem);max-width:32.0rem;transform:translateX(100%);transition:transform 0.3s ease-in-out;} .nav-menu nav > ul > li > a {display:block;font-size:1.6rem;line-height:2.4rem;font-family:'NanumSquareNeoExtraBold';} .nav-menu nav > ul > li + li {margin:4.0rem 0 0;} .nav-menu nav > ul > li > ul {margin:2.0rem 0 0;display:flex;flex-wrap:wrap;gap:0 3.0rem;} .nav-menu nav > ul > li > ul a {font-size:1.4rem;line-height:2.0rem;} .nav-menu nav > ul + div {margin:4.0rem 0 0;display:flex;gap:0 3.0rem;} /* 레이어일때 */ [data-menu="on"] #header [data-btn="menu-on"] {display:none;} [data-menu="on"] #header [data-btn="menu-off"] {display:block;} .nav-menu.open {visibility:visible;background:rgba(0,0,0,0.5);z-index:200;} .nav-menu.open nav {transform:translateX(0%);} /* 토글일때 */ .menu-on #header [data-btn="menu-on"] {display:none;} .menu-on #header [data-btn="menu-off"] {display:block;} .menu-on .nav-menu {visibility:visible;background:rgba(0,0,0,0.5);z-index:200;} .menu-on .nav-menu nav {transform:translateX(0%);} } /* -------------------------------------------------------------------------------- LAYOUT CONTAINER : #container > #content --------------------------------------------------------------------------------- */ #container {max-width:204.8rem;/*min-height:calc(100vh - var(--header));*/padding:4.0rem var(--space1) 4.0rem;margin:0 auto;} #container .content {position:relative;margin:0 auto;} #container[data-page="sub"] {min-height:auto;padding:7.0rem var(--space1) 6.0rem;} @media only screen and (max-width:983px){ #container {padding:4.0rem var(--space1) 4.0rem;} #container .content > .aside1 {margin:0 0 2.0rem;} #container[data-page="sub"] {padding:7.0rem 3.0rem;} } @media only screen and (min-width:984px){ #container .content > .aside1 {position:absolute;right:0;bottom:calc(100% + 1.2rem);} } section ~ section {margin:var(--space2) 0 0;} /* -------------------------------------------------------------------------------- LAYOUT : ASIDE --------------------------------------------------------------------------------- */ #navAside {position:fixed;right:2.0rem;bottom:2.0rem;z-index:-1;opacity:0;transition:all 0.2s ease-in-out;} @media only screen and (max-width:983px){ #navAside {right:1.0rem;bottom:1.0rem;} } .scroll #navAside {opacity:1;z-index:500;} /* -------------------------------------------------------------------------------- LAYOUT : FOOTER : #footer --------------------------------------------------------------------------------- */ #footer {text-align:center;padding:5.0rem 0;margin:-4.0rem 0 0;font-size:1.4rem;line-height:2.4rem;color:#6c6f7f;} #footer nav {font-size:1.4rem;} #footer nav a + a {margin:0 0 0 2.0rem;} #footer dl {display:flex;flex-wrap:wrap;justify-content:center;margin:1.8rem 0 0;gap:0 1.8rem;} #footer dl dt {font-weight:700;} /* TABLET */ @media only screen and (min-width:984px){ #footer nav {font-size:1.6rem;} #footer nav a + a {margin:0 0 0 3.0rem;} } /* MOBILE */ @media only screen and (max-width:983px){ #footer {padding:4.0rem 0;font-size:1.1rem;line-height:1.8rem;} #footer nav {font-size:1.3rem;} #footer dl {gap:0 0.6rem;} #footer dl > dd:last-child {width:100%;} } /* -------------------------------------------------------------------------------- LAYOUT : POPUP --------------------------------------------------------------------------------- */ /* 컨텐츠형 : 공통 */ [class*="pop-modal"] {display:none;z-index:-1000;overflow-y:auto;} [class*="pop-modal"]::-webkit-scrollbar {width:0.4rem;} [class*="pop-modal"]::-webkit-scrollbar-thumb {background:#dfdfdf;opacity:0.2;} [class*="pop-modal"]::-webkit-scrollbar-track {background:#f8f8f8;border-radius:0;} [class*="pop-modal"], [class*="pop-modal"]:before {position:fixed;left:0;right:0;top:0;bottom:0;} [class*="pop-modal"]:before {content:'';background:rgba(0,0,0,0);transition:all 0.4s ease-in-out;} [class*="pop-modal"] section {position:relative;background:#fff;box-shadow:0 0.1rem 0.3rem var(--g3);} [class*="pop-modal"].open:before {background:rgba(0,0,0,0.7);} [class*="pop-modal"].open {display:block;z-index:1000;} [class*="pop-modal"] header {border-bottom:0.1rem solid #0C0B15;} [class*="pop-modal"] header h1 {font-weight:900;color:var(--g1);} [class*="pop-modal"] header button[data-btn="pop-close"], [class*="pop-modal"] .ui-hidebtn {overflow:hidden;display:block;position:absolute;} [class*="pop-modal"] header button[data-btn="pop-close"] {right:0;top:0;width:5.6rem;height:5.6rem;} [class*="pop-modal"] header button[data-btn="pop-close"], [class*="pop-modal"] .ui-hidebtn, [class*="pop-modal"] header button[data-btn="pop-close"]::selection, [class*="pop-modal"] .ui-hidebtn::selection {color:transparent;} [class*="pop-modal"] header button[data-btn="pop-close"]:before, [class*="pop-modal"] header button[data-btn="pop-close"]:after {content:'';display:block;position:absolute;left:50%;top:50%;width:2.4rem;height:0.2rem;margin:-0.1rem 0 0 -1.2rem;background:var(--line1);} [class*="pop-modal"].open header button[data-btn="pop-close"]:before {transform:rotate(-45deg);} [class*="pop-modal"].open header button[data-btn="pop-close"]:after {transform:rotate(45deg);} /* 유형1 */ .pop-modal1 {overflow-y:scroll;font-size:0;text-align:center;} .pop-modal1 section {width:100%;padding:4.0rem;border:0.1rem solid var(--color-gray0);box-shadow:0 0.3rem 0.6rem rgba(0,0,0,0.29);font-size:initial;text-align:left;} .pop-modal1.open section, .pop-modal1.open:after {display:inline-block;vertical-align:middle;} .pop-modal1.open:after {content:'';width:1px;height:calc(100vh - 8.0rem);display:inline-block;margin:0 -1px;} .pop-modal1 .content ~ .bottom {text-align:center;} .pop-modal1 .content ~ .bottom .btn-com1:only-child {width:100%;} .pop-modal1.pop-w1 section {max-width:67.6rem;} .pop-modal1.pop-w2 section {max-width:52.2rem;} .pop-modal1 .ui-hidebtn {display:none;} @media only screen and (min-width:984px){ .pop-modal1 {padding:4.0rem;} .pop-modal1 section {padding:4.0rem 4.0rem 5.0rem;border-radius:1.0rem;} .pop-modal1 header {margin:-2.5rem 0 3.0rem;} .pop-modal1 header h1 {font-size:2.3rem;line-height:7.8rem;} .pop-modal1 header button[data-btn="pop-close"] {margin:2.0rem;} .pop-modal1 .content ~ .bottom {margin:4.0rem 0 0;} .pop-modal1 .content ~ .bottom button {min-width:14.4rem;} .pop-modal1.pop-w1 section {padding:4.0rem 6.0rem;} .pop-modal1.pop-w1 header button[data-btn="pop-close"] {margin:2.0rem 4.0rem;} } @media only screen and (max-width:983px){ .pop-modal1 {padding:1.0rem;} .pop-modal1 section {padding:2.0rem 2.0rem 4.0rem;border-radius:0.5rem;} .pop-modal1 header {margin:-1.5rem 0 2.0rem;} .pop-modal1 header h1 {font-size:1.6rem;line-height:6.0rem;} .pop-modal1 header button[data-btn="pop-close"] {margin:0.4rem;} .pop-modal1 .content ~ .bottom {margin:3.0rem 0 0;} .pop-modal1 .content ~ .bottom button {min-width:9.6rem;} .pop-modal1.pop-w1 section, .pop-modal1.pop-w2 section {width:100%;} } /* 유형2 */ .pop-modal2 {visibility:hidden;position:fixed;left:0;right:0;bottom:0;display:flex;flex-direction:column;justify-content:flex-end;padding:6.0rem var(--space1) 0;overflow:hidden;} .pop-modal2 .section {position:relative;width:100%;background:#fff;border-radius:2.0rem 2.0rem 0 0;padding:5.5rem var(--space1) 6.0rem;margin-bottom:-1.0rem;overflow:hidden; box-shadow:0.1rem 0.1rem 0.5rem rgba(172,177,192,0.5);transform:translateY(100%);transition:all 0.4s cubic-bezier(0.73,1.34,0.66,0.94);z-index:1;} .pop-modal2 .section .content {margin:0 auto;} .pop-modal2 .section .header {position:absolute;left:0;right:0;top:0;bottom:0;} .pop-modal2 .section .header [data-btn="pop-close"] {display:block;width:100%;height:100%;} .pop-modal2 .section .header [data-btn="pop-close"]:before {content:'';display:block;position:absolute;left:50%;top:2.0rem;width:8.0rem;height:0.8rem;background:var(--line2);border-radius:0.5rem;color:transparent;overflow:hidden;} .pop-modal2 .section .area-btn1 {margin:3.0rem 0 0;} .pop-modal2 .section .area-btn1 .btn-com1 {max-width:86.0rem;} .pop-modal2.open {visibility:visible;display:flex;} .pop-modal2.open-load .section {transform:translateY(0);} .pop-modal2 .ui-hidebtn {position:fixed;right:0;bottom:0;width:100vw;height:100vh;-webkit-tap-highlight-color:transparent;} .pop-modal2 .ui-hidebtn:focus {outline:none;} @media only screen and (min-width:984px){ .pop-modal2 .section {padding:7.0rem var(--space1);max-width:190.8rem;margin:0 auto;} .pop-modal2 .section .content {max-width:114.0rem;} } @media only screen and (max-width:768px){ .pop-modal2 .section {margin:0 -1.0rem -1.0rem;width:calc(100% + 2.0rem);} } /* 팝업오픈시 바닥포커스 제한 .modal-on .nav-skip *, .modal-on #header *, .modal-on #container *, .modal-on #footer * {pointer-events:none;} */ /* 로딩 */ [class*="pop-loader"] {visibility:hidden;position:fixed;left:0;right:0;top:0;bottom:0;z-index:1000;} [class*="pop-loader"], [class*="pop-loader"]:before {position:fixed;left:0;right:0;top:0;bottom:0;} [class*="pop-loader"]:before {content:'';background:rgba(0,0,0,0);transition:all 0.3s ease-in-out;} [class*="pop-loader"] > dl {display:none;position:fixed;left:0;right:0;top:50%;margin:0 auto;background:#fff;outline:0;transform:translateY(-50%);} [class*="pop-loader"] > dl {padding:4.0rem 3.1rem 10.0rem;width:calc(100% - 6.2rem);max-width:36.0rem;} [class*="pop-loader"] > dl > dt {margin:-4.0rem -3.1rem 4.0rem;padding:0 1.6rem;border-bottom:0.1rem solid var(--g3);font-weight:700;font-size:2.0rem;line-height:5.7rem;color:var(--default-txt);} [class*="pop-loader"] > dl > dd {font-size:1.8rem;line-height:2.8rem;text-align:center;} [class*="pop-loader"] > dl > dd:after {display:block;content:'';width:8.0rem;height:8.0rem;margin:5.6rem auto 0;background:url(../../images/com/loading.gif) no-repeat 50% 50%;} [class*="pop-loader"].open {visibility:visible;} [class*="pop-loader"].open:before {background:rgba(0,0,0,0.4);} [class*="pop-loader"].open > dl {display:block;} @charset "utf-8"; /* -------------------------------------------------------------------------------- COMPONENT : 공통 --------------------------------------------------------------------------------- */ .sub-con1 {font-size:var(--font2);color:var(--g2);} .txt-guide1 {color:var(--invalid);} .txt-c1 {color:var(--primary-c1);} .txt-c2 {color:var(--primary-c2);} .txt-c3 {color:var(--primary-c3);} /* -------------------------------------------------------------------------------- COMPONENT : TITLE --------------------------------------------------------------------------------- */ .tit-page {display:flex;margin:0 0 3.0rem;gap:2.0rem;} .tit-page h1, .tit-page h2 {font-size:2.0rem;line-height:2.2rem;} .tit-page h2 {line-height:2.8rem;} .tit-page h2 span:not(:only-child):first-child {font-family:'NanumSquareNeoLight';font-weight:300;} [data-page="sub"] .tit-page {flex-direction:column;align-items:center;gap:3.0rem;margin:0 0 5.0rem;text-align:center;} [data-page="sub"] .tit-page p {font-size:var(--font1);font-weight:700;} main header:not([class]) {overflow:hidden;position:absolute;left:-0.1rem;top:-0.1rem;width:0.1rem;height:0.1rem;opacity:0;} /* 헤드라인형1 */ .tit-headline1 {position:relative;margin:0 0 2.0rem;padding:1.0rem 0 0;} div.tit-headline1 {display:flex;flex-wrap:wrap;align-items:center;} div.tit-headline1 > :first-child, .tit-headline1:not(div) {font-size:1.6rem;line-height:1.5;font-weight:900;} div.tit-headline1 > :first-child:before, .tit-headline1:not(div):before {content:'';display:block;position:absolute;left:0;top:0;height:0.2rem;width:3.0rem;background:var(--line1);} .wrap-section1 div.tit-headline1 > :first-child, .wrap-section1 .tit-headline1:not(div) {font-size:2.0rem;} [data-page="sub"] .tit-headline1 {margin:0 0 1.5rem;} /* 섹션타이틀 */ .tit-section1 {position:relative;margin:4.0rem 0 2.0rem;} div.tit-section1 {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2.0rem;} div.tit-section1 > :first-child, .tit-section1:not(div) {font-size:1.8rem;line-height:2.0rem;font-weight:900;} @media only screen and (min-width:984px){ .tit-section1 {margin:var(--space4) 0 3.0rem;} div.tit-section1 > :first-child, .tit-section1:not(div) {font-size:2.2rem;line-height:2.6rem;} } /* 서브1 */ .tit-sub1 {display:flex;position:relative;align-items:center;padding:0 0 0 0.4rem;font-size:1.6rem;line-height:var(--com2);} .tit-sub1:before, .tit-sub1:after {content:'';position:absolute;} .tit-sub1:before {left:-0.5rem;top:50%;width:0.4rem;height:0.4rem;margin:-0.2rem 0 0;background:var(--g1);border-radius:50%;} .tit-sub1 ~ .tit-sub1 {margin:6.1rem 0 0;} .tit-sub1 ~ .tit-sub1:after {left:0;right:0;top:-3.1rem;border-top:1px solid var(--line2);} .tit-sub1 [class*="cnt"] {margin:0 0 0 var(--space3);} .tit-sub1 .cnt1 {font-weight:700;color:var(--primary-c1);} .tit-sub1 .cnt2 {font-weight:400;color:var(--primary-c3);} .tit-sub1 .aside {position:absolute;right:0;top:0;} /* 서브2 */ .tit-sub2 {margin:0 0 2.0rem;font-size:1.4rem;line-height:2.0rem;font-weight:700;letter-spacing:-0.077rem;} @media only screen and (min-width:984px){ .tit-page {margin:0 0 3.0rem;} .tit-page h1 {font-size:2.8rem;line-height:3.6rem;} .tit-page h2 {font-size:3.3rem;line-height:3.4rem;} .tit-page h2 span:not(:only-child):first-child {display:block;font-family:'NanumSquareNeoLight';font-weight:300;} [data-page="sub"] .tit-page {margin:0 0 6.5rem;} .wrap-main2 .tit-page h1, .wrap-main2 .tit-page h2, [data-page="sub"] .tit-page h1, [data-page="sub"] .tit-page h2 {font-size:3.0rem;line-height:3.4rem;white-space:nowrap;} .wrap-section1 .tit-headline1 {margin:0 0 3.0rem;} div.tit-headline1 {gap:2.0rem;} div.tit-headline1 .sub {margin:-0.2rem 0;flex:1;} div.tit-headline1 .info {white-space:nowrap;} div.tit-headline1 > :first-child, .tit-headline1:not(div) {font-size:2.0rem;} .wrap-section1 div.tit-headline1 > :first-child, .wrap-section1 .tit-headline1:not(div) {font-size:3.0rem;} [data-page="sub"] .tit-headline1 {margin:0 0 2.0rem;} .tit-sub1 {padding:0 0 0 2.0rem;font-size:2.0rem;} .tit-sub1:before {left:0.8rem;} .tit-sub1 ~ .tit-sub1 {margin:10.1rem 0 0;} .tit-sub1 ~ .tit-sub1:after {top:-5.1rem;} .tit-sub2 {margin:0 0 3.0rem;font-size:1.8rem;line-height:2.6rem;} } @media only screen and (min-width:1440px){ .wrap-section1 .tit-headline1 {margin:0 0 4.0rem;} div.tit-headline1 {gap:4.0rem;} } @media only screen and (max-width:983px){ .tit-page {justify-content:space-between;} .wrap-main2 .tit-page h1, .wrap-main2 .tit-page h2 {display:flex;gap:0 0.7rem;} div.tit-headline1 {gap:1.6rem;justify-content:space-between;} div.tit-headline1 .info {width:100%;} } /* -------------------------------------------------------------------------------- COMPONENT : TEXT --------------------------------------------------------------------------------- */ /* 유형1 */ [class*="txt-bul"] {text-align:left;} [class*="txt-bul"] > ul > li, [class*="txt-bul"] > dl > dd, [class*="txt-bul"] > :not(ul):not(ol):not(dl) {position:relative;} [class*="txt-bul"] > ul > li::before, [class*="txt-bul"] > dl > dd::before, [class*="txt-bul"] > :not(ul):not(ol):not(dl)::before {display:block;float:left;} .txt-bul1 > ul > li, .txt-bul1 > dl > dd, .txt-bul1 > :not(ul):not(ol):not(dl) {padding:0 0 0 1em;} .txt-bul1 > ul > li::before, .txt-bul1 > dl > dd::before, .txt-bul1 > :not(ul):not(ol):not(dl)::before {content:"ㆍ";width:1em;margin:0 0 0 -1em;} .txt-bul2 > ul > li, .txt-bul2 > dl > dd, .txt-bul2 > :not(ul):not(ol):not(dl) {padding:0 0 0 0.7em;} .txt-bul2 > ul > li::before, .txt-bul2 > dl > dd::before, .txt-bul2 > :not(ul):not(ol):not(dl)::before {content:"-";width:0.7em;margin:0 0 0 -0.7em;} .txt-bul3 > ul > li, .txt-bul3 > dl > dd, .txt-bul3 > :not(ul):not(ol):not(dl) {padding:0 0 0 0.7em;} .txt-bul3 > ul > li::before, .txt-bul3 > dl > dd::before, .txt-bul3 > :not(ul):not(ol):not(dl)::before {content:"*";width:0.7em;margin:0 0 0 -0.7em;} @media only screen and (min-width:1064px){ .txt-bul1.sub-con1 > ul > li, .txt-bul1.sub-con1 > dl > dd, .txt-bul1.sub-con1 > :not(ul):not(ol):not(dl), .txt-bul2.sub-con1 > ul > li, .txt-bul2.sub-con1 > dl > dd, .txt-bul2.sub-con1 > :not(ul):not(ol):not(dl) {padding:0 0 0 2.0rem;} .txt-bul1.sub-con1 > ul > li::before, .txt-bul1.sub-con1 > dl > dd::before, .txt-bul1.sub-con1 > :not(ul):not(ol):not(dl)::before, .txt-bul2.sub-con1 > ul > li::before, .txt-bul2.sub-con1 > dl > dd::before, .txt-bul2.sub-con1 > :not(ul):not(ol):not(dl)::before {width:2.0rem;margin:0 0 0 -2.0rem;} } /* 마크형 */ .txt-mark1 {display:inline-block;width:1em;overflow:hidden;white-space:nowrap;vertical-align:top;} .txt-mark1:before {content:'*';display:inline-block;color:#FE684B;width:1em;text-align:center;} /* 아이콘추가 */ .icon-set1:before {content:'';display:block;margin:0 auto 4.5rem;width:10.0rem;height:10.0rem;background:var(--img1);background-size:48.0rem 48.0rem;} .icon-set1[data-icon="ic1"]:before {background-position:0 -21.0rem;} .icon-set1[data-icon="ic2"]:before {background-position:-10.0rem -21.0rem;} [class*="txt-bul"].icon-set1 > ul > li + li {margin:1.4rem 0 0;} /* -------------------------------------------------------------------------------- COMPONENT : MESSAGE --------------------------------------------------------------------------------- */ .mes-t1 > p {font-size:var(--font1);line-height:2.4rem;color:var(--g1);} .mes-t1 > p >:first-child {display:block;font-weight:700;font-size:2.0rem;line-height:1.5;margin:0 0 0.8rem;} .mes-t1 [class*="area-btn"] {margin:2.0rem 0 0;} @media only screen and (min-width:984px){ .mes-t1 > p {line-height:2.6rem;} .mes-t1 > p >:first-child {font-size:3.0rem;line-height:3.6rem;margin:0 0 1.6rem;} .mes-t1 [class*="area-btn"] {margin:4.5rem 0 0;} .mes-t1 .area-btn2 .btn-com1 {width:25.6rem;} } /* -------------------------------------------------------------------------------- COMPONENT : ICON --------------------------------------------------------------------------------- */ [class*="icon-menu"], [class*="icon-com"] {position:relative;overflow:hidden;display:inline-block;white-space:nowrap;font-size:0.1rem;line-height:1;} [class*="icon-menu"], [class*="icon-com"], [class*="icon-menu"]::selection, [class*="icon-com"]::selection {color:transparent;} [class*="icon-menu"]:before, [class*="icon-com"]:before {content:'';display:inline-block;flex:1;} .icon-com1 {width:var(--com2);height:var(--com2);background:#fff;border:1px solid var(--line3);} .icon-com1:focus, .icon-com1:hover {outline:0;border-color:var(--line1);transition:border 0.3s ease-in-out;} .icon-com1:before {content:'';width:2.0rem;height:2.0rem;margin:auto;background:var(--img1);} .icon-com1.ic1:before {background-position:0 -2.4rem;transform:rotate(45deg);} .icon-com1.ic2:before {background-position:-4.0rem -2.4rem;transform:rotate(90deg);} .icon-com1.ic3:before {background-position:-4.0rem -2.4rem;transform:rotate(-90deg);} .icon-com2 {width:2.0rem;height:2.0rem;} .icon-com2:before {content:'';display:block;width:2.0rem;height:2.0rem;box-shadow:0 0 0 0.1rem inset var(--g3);border-radius:50%;background:#fff var(--img1);background-position:-6.0rem -2.4rem;} .icon-com3 {width:3.0rem;height:3.0rem;} .icon-com3[class*=" ic"]:before {content:'';display:block;width:100%;height:100%;background:var(--img1);} .icon-com3.ic1:before {background-position:-10.5rem -4.4rem;} .icon-com3.ic2 {width:3.5rem;} .icon-com3.ic2:before {background-position:-6.0rem -4.4rem;} .icon-com3[data-btn="del"], .icon-com3[data-btn="add"] {border-radius:0.2rem;} .icon-com3[data-btn="del"]:before, .icon-com3[data-btn="add"]:before, .icon-com3[data-btn="add"]:after {content:'';display:block;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)} .icon-com3[data-btn="del"]:before, .icon-com3[data-btn="add"]:before {width:1.7rem;height:0.2rem;} .icon-com3[data-btn="add"]:after {width:0.2rem;height:1.7rem;} .icon-com3[data-btn="del"]:before {background:var(--line1);} .icon-com3[data-btn="add"]:before, .icon-com3[data-btn="add"]:after {background:#fff;} .icon-com3[data-btn="del"] {border:0.1rem solid #8c8f9a;} .icon-com3[data-btn="add"] {border:0.1rem solid var(--line1);background:var(--line1);} .icon-com4 {width:var(--com2);height:var(--com2);} .icon-com4:before {content:'';width:2.0rem;height:2.0rem;margin:auto;background:var(--img1);} .icon-com4.ic1:before {background-position:0 -2.4rem;transform:rotate(45deg);} .icon-com4.ic2:before {background-position:-4.0rem -2.4rem;transform:rotate(90deg);} .icon-com4.ic3:before {background-position:-4.0rem -2.4rem;transform:rotate(-90deg);} .icon-com5 {width:3.2rem;height:3.2rem;} .icon-com5:before {content:'';display:block;width:3.2rem;height:3.2rem;background:var(--img1);} .icon-com5.ic1:before {background-position:-20.0rem -12.0rem;} .icon-com5.ic2:before {background-position:-23.2rem -12.0rem;} .icon-com5.ic3:before {background-position:-26.4rem -12.0rem;} .icon-menu1 {position:relative;width:var(--header);height:var(--header);background:var(--g1);} .icon-menu1:before, .icon-menu1:after {content:'';position:absolute;left:50%;top:50%;} .icon-menu1.ic1:before, .icon-menu1.ic1:after {width:2.0rem;transform:translate(-50%, -50%);} .icon-menu1.ic1:before {height:1.4rem;border-top:2px solid #fff;border-bottom:2px solid #fff;} .icon-menu1.ic1:after {height:2px;background:#fff;} .icon-menu1.ic2:before, .icon-menu1.ic2:after {width:2.4rem;height:0.2rem;background:#fff;margin:0 0 0 -1.2rem;} .icon-menu1.ic2:before {transform:rotate(-45deg);} .icon-menu1.ic2:after {transform:rotate(45deg);} .icon-state1 {position:relative;display:inline-flex;line-height:2.0rem;} .icon-state1:before, .icon-state1:after {content:'';width:2.0rem;height:2.0rem;} .icon-state1:before {border-radius:100%;margin:0 1.0rem 0 0;} .icon-state1:after {background:var(--img1);position:absolute;left:0;top:0;} .icon-state1[data-state="1"]:before, [data-state="1"] .icon-state1:before {background-color:#fff;} .icon-state1[data-state="2"]:before, [data-state="2"] .icon-state1:before {background-color:#9FA4B4;} .icon-state1[data-state="3"]:before, [data-state="3"] .icon-state1:before {background-color:#c29c57;} .icon-state1[data-state="4"]:before, [data-state="4"] .icon-state1:before {background-color:#ced1d9;} .icon-state1[data-state="1"]:after, [data-state="1"] .icon-state1:after {background-position:-12.0rem -2.4rem;} .icon-state1[data-state="2"]:after, [data-state="2"] .icon-state1:after {background-position:-14.0rem -2.4rem;filter:invert();} .icon-state1[data-state="3"]:after, [data-state="3"] .icon-state1:after {background-position:-16.0rem -2.4rem;filter:invert();} .icon-state1[data-state="4"]:after, [data-state="4"] .icon-state1:after {background-position:-18.0rem -2.4rem;filter:invert();} .icon-state1 + .icon-state1 {margin:0 0 0 2.0rem;} .icon-state2 {position:relative;display:inline-flex;align-items:center;justify-content:center;width:6.0rem;height:6.0rem;font-size:1.2rem;font-weight:900;border:0.2rem solid var(--line2);background:#fff;color:var(--g1);border-radius:100%;} .icon-state2[data-state="1"] {border-color:#DCDFFF;background:#DCDFFF;} .icon-state2[data-state="2"] {border-color:#858998;} .icon-state2[data-state="3"] {border:0.2rem dotted #858998;color:#858998;} .icon-state2[data-state="4"] {border-color:#EDEFF3;background:#EDEFF3;color:#858998;} .icon-state2[data-state="5"] {border:0.2rem dotted #90A0FF;color:#90A0FF;} .icon-state2[data-state="6"] {border:0.2rem dotted #D476A2;color:#D476A2;} .icon-state2[data-state="7"] {border-color:var(--g1);background:var(--g1);color:#fff;} .icon-state3 {position:relative;display:inline-flex;padding:0 1.2rem;font-size:var(--font1);line-height:3.1rem;font-weight:900;border:1px solid var(--line1);border-radius:5.0rem;} .icon-state3[data-state="2"] {border-style:dashed;} .icon-state4 {position:relative;display:inline-flex;min-width:7.4rem;padding:0 1.0rem;font-size:var(--font1);line-height:2.8rem;font-weight:800;border:2px solid #828692;border-radius:5.0rem;color:var(--g1);justify-content:center;letter-spacing:-0.035em;} .icon-state4[data-state="1"], [data-state="1"] .icon-state4 {border-color:#5E69AF;color:#fff;background-color:#5E69AF;} .icon-state4[data-state="2"], [data-state="2"] .icon-state4 {border-color:#90A0FF;color:#90A0FF;border-style:dotted;} .icon-state4[data-state="3"], [data-state="3"] .icon-state4 {border-color:#858998;color:#858998;border-style:dotted;} .icon-state4[data-state="4"], [data-state="4"] .icon-state4 {border-color:#EDEFF3;color:#858998;background-color:#EDEFF3;} .icon-state4[data-state="5"], [data-state="5"] .icon-state4 {border-color:#D476A2;color:#D476A2;border-style:dotted;} .icon-state4[data-state="6"], [data-state="6"] .icon-state4 {border-color:#DCDFFF;color:#5E69AF;background-color:#DCDFFF;} .icon-state4[data-state="7"], [data-state="7"] .icon-state4 {border-color:#E9E2D4;color:#774F4A;background-color:#E9E2D4;} .icon-state4[data-state="8"], [data-state="8"] .icon-state4 {border-color:var(--g1);color:#fff;background-color:var(--g1);} .icon-state4[data-state="9"], [data-state="9"] .icon-state4 {border-color:#828692;color:var(--g1);} .icon-state4[data-state="10"], [data-state="10"] .icon-state4 {border-color:#DCE0F5;color:#6C7DD4;background-color:#F3F5FF;} .icon-state4[data-state="11"], [data-state="11"] .icon-state4 {border-color:#F6D2E3;color:#D476A2;background-color:#FEECF4;} .icon-state4[data-state="12"], [data-state="12"] .icon-state4 {border-color:#C4EAEE;color:#4098A1;background-color:#E4F5F6;} .icon-state4[data-state="wait"] {background-color:#DCDFFF;border-color:#DCDFFF;} .icon-state4[data-state="none"] {border-color:#F1F3F7;background-color:#F1F3F7;color:#828692;} @media only screen and (min-width:984px){ .icon-state1:before {margin:0 1.5rem 0 0;} .icon-state2 {width:8.6rem;height:8.6rem;font-size:1.8rem;} .icon-state3 {padding:0 2.1rem;line-height:3.7rem;} .icon-state4 {min-width:8.4rem;line-height:3.1rem;} } /* -------------------------------------------------------------------------------- COMPONENT : BUTTON --------------------------------------------------------------------------------- */ [class*="btn-action"], [class*="btn-com"], [class*="btn-sub"], [class*="btn-icon"], [class*="btn-t"], [class*="link-t"] {position:relative;display:inline-block;text-align:center;white-space:nowrap;vertical-align:top;} /* ACTION */ .btn-action1 {min-width:10.0rem;padding:0 1.6rem;font-size:1.6rem;line-height:var(--com1);font-weight:700;background:var(--primary-c1);color:#fff;border-radius:1.0rem;transition:background-color 0.3s ease-in-out;} .btn-action1:not([class*=" c"]):hover {background:#7587E5;} .btn-action1.c1 {background:var(--bg2);color:var(--g1);} .wrap-section1 .area-action .btn-action1 {border-radius:0 0 0.9rem 0.9rem;} @media only screen and (min-width:984px){ .btn-action1 {font-size:2.0rem;} } @media only screen and (max-width:983px){ .wrap-section2 .btn-action1 {line-height:6.5rem;} } /* COMMON BUTTON */ [class*="btn-com"] {padding:0 1.6rem;font-weight:900;color:var(--g1);} .btn-com1 {font-size:var(--font1);line-height:var(--com2);background:#fff;box-shadow:inset 0 0 0 0.2rem var(--line1);transition:box-shadow 0.3s ease-in-out;} .btn-com1:not([class*=" c"]):not([class*=" ic"]):not([data-state]):hover {box-shadow:inset 0 0 0 0.4rem var(--line1);} .btn-com1.c1 {background:var(--line1);color:#fff;} .btn-com1[disabled], .btn-com1[aria-disabled] {background:var(--g5);box-shadow:inset 0 0 0 0.2rem var(--g5);color:var(--line3);} .btn-com1[data-state="1"] {box-shadow:inset 0 0 0 0.2rem var(--primary-c1);background:none;color:var(--primary-c1);} .btn-com1[data-state="1"][disabled], .btn-com1[data-state="1"][aria-disabled] {box-shadow:inset 0 0 0 0.2rem #E0E4FF;color:#90A0FF;} .btn-com1[class*=" ic"] {text-align:left;padding:0 5.0rem 0 3.0rem;} .btn-com1[class*=" ic"]:after {content:'';display:block;position:absolute;right:2.5rem;top:50%;width:2.0rem;height:2.0rem;margin:-1.0rem 0 0;background:var(--img1);background-position:-8.0rem -2.4rem;} .btn-com1.ic1 {box-shadow:inset 0 0 0 0.1rem var(--line2);border-radius:0.4rem;} .btn-com1.ic1:before, .btn-com1.ic1:after {transition:all 0.3s ease-in-out;} .btn-com1.ic1:before {content:'';display:block;position:absolute;right:3.5rem;top:50%;width:2.0rem;height:2.0rem;margin:-1.0rem 0 0;background:var(--img1);background-position:-8.0rem -2.4rem;opacity:0;} .btn-com1.ic1:hover:after {opacity:0;} .btn-com1.ic1:hover:before {opacity:1;right:2.5rem;} /* SUB */ [class*="btn-sub"] {display:inline-flex;align-items:center;justify-content:center;min-width:8.6rem;padding:0 1.6rem;background:#fff;font-weight:700;color:var(--g1);} .btn-sub1 {font-size:var(--font1);line-height:var(--com2);box-shadow:inset 0 0 0 0.1rem var(--line2);border-radius:0.2rem;transition:all 0.3s ease-in-out;} .btn-sub1[aria-expanded] {justify-content:space-between;} .btn-sub1[class*=" ic"]:after, .btn-sub1[aria-expanded]:after {content:'';width:2.0rem;height:2.0rem;margin:0 -0.4rem 0 0.5rem;background:var(--img1);} .btn-sub1.ic1:after {background-position:0 -2.4rem;} .btn-sub1.ic2:after {background-position:-2.0rem -2.4rem;} .btn-sub1.ic3:after {background-position:-8.0rem -2.4rem;} .btn-sub1.ic4:after {background-position:-10.0rem -2.4rem;margin:-0.1rem -0.2rem 0 0.8rem;} .btn-sub1:not([class*=" ic"])[aria-expanded]:after {background-position:-4.0rem -2.4rem;} .btn-sub1:not([class*=" ic"])[aria-expanded="true"]:after {transform:rotate(180deg);} .btn-sub1:disabled, .btn-sub1[aria-disabled] {color:#9FA4B4;background:var(--g5);cursor:default;} .btn-sub1.c1 {box-shadow:inset 0 0 0 0.1rem var(--line2);} .btn-sub1.c2 {box-shadow:inset 0 0 0 0.1rem var(--line1);} .btn-sub1.c3 {box-shadow:inset 0 0 0 0.1rem var(--line1);background:var(--line1);color:#fff;} .btn-sub1:hover {background:var(--g5);box-shadow:0 0 0 0.1rem inset var(--g5);} .btn-sub2 {font-size:var(--font1);line-height:calc(var(--com2) - 0.2rem);border:1px dashed #828692;border-radius:5.0rem;transition:all 0.3s ease-in-out;} .btn-sub2[class*=" ic"] {justify-content:space-between;} .btn-sub3 {font-size:1.1rem;line-height:2.8rem;padding:0 2.0rem;border:1px dashed #9fa4b4;border-radius:5.0rem;transition:all 0.3s ease-in-out;font-weight:400;} .btn-sub3[class*=" ic"] {justify-content:space-between;} .btn-sub3.ic1:before, .btn-sub3.ic1:after {content:'';background:var(--g1);} .btn-sub3.ic1:after {width:0.9rem;height:0.1rem;} .btn-sub3.ic1:before {position:absolute;right:2.4rem;width:0.1rem;height:0.9rem;} .btn-sub4 {min-width:0;padding:0 1.4rem;font-size:var(--font2);line-height:3.1rem;border:1px solid #99CCFF;background:#ECF5FF;border-radius:0.3rem;color:#538AA4;} @media only screen and (min-width:984px){ .btn-com1[class*=" ic"] {padding:0 6.0rem 0 4.0rem;} .btn-sub2[class*=" ic"]:after {content:'';width:3.0rem;height:3.0rem;margin:-0.2rem 0 0 1.0rem;background:var(--img1);} .btn-sub2.ic1:after {background-position:0 -4.4rem;} .btn-sub3 {font-size:1.2rem;line-height:3.4rem;padding:0 2.5rem;} .btn-sub3.ic1:after {margin:0 0 0 0.8rem;} .btn-sub3.ic1:before {right:2.9rem;} } @media only screen and (max-width:983px){ .btn-sub2[class*=" ic"]:before {content:'';width:2.1rem;height:2.1rem;margin:0 0.5rem 0 0;background:var(--img1);background-size:33.6rem 33.6rem;} .btn-sub2.ic1:before {background-position:0 -3.1rem;} .btn-sub3.ic1:after {margin:0 0 0 0.5rem;} } /* 텍스트 아이콘1 */ .btn-t1 {display:inline-flex;font-size:1.3rem;line-height:2.4rem;color:var(--g3);white-space:nowrap;} .btn-t1[class*=" ic"]:before {content:'';width:2.4rem;height:2.4rem;margin:0 0.7rem 0 0;background:var(--img1);} .btn-t1.ic1:before {background-position:0 0;} .btn-t1.ic2:before {background-position:-2.4rem 0;width:2.9rem;} /* 텍스트 아이콘2 */ .btn-t2.box-t1 {display:flex;flex-wrap:wrap;gap:2.4rem var(--space4) ;} .btn-t2:not(div), div.btn-t2 > a, div.btn-t2 > button {display:inline-flex;font-size:1.6rem;line-height:3.0rem;white-space:nowrap;} .btn-t2:not(div):hover , div.btn-t2 > a:hover , div.btn-t2 > button:hover {text-decoration:underline;} .btn-t2:not(div):before, div.btn-t2 > a:before, div.btn-t2 > button:before {content:'';width:3.0rem;height:3.0rem;margin:0 0.8rem 0 0;background:var(--img1);background-position:-10.5rem -4.4rem;} @media only screen and (min-width:984px){ .btn-t2:not(div), div.btn-t2 > a, div.btn-t2 > button {font-size:1.8rem;} .btn-t2:not(div):before, div.btn-t2 > a:before, div.btn-t2 > button:before {margin:0 1.8rem 0 0;} } @media only screen and (max-width:768px){ .btn-t2.box-t1 {flex-direction:column;} } /* 아이콘형1 */ .btn-icon1 {display:flex;flex-direction:column;justify-content:center;gap:0.5rem;width:5.2rem;height:5.2rem;background:rgba(237, 239, 243, 0.7); font-size:1.0rem;line-height:1.2rem;font-weight:700;text-align:center;color:#4f4f5d; box-shadow:0.1rem 0.3rem 0.3rem rgba(172, 177, 192, 0.5);border-radius:50%;} .btn-icon1.ic1:before {content:'';display:block;width:1.6rem;height:1.6rem;margin:0 auto;background:var(--img1);background-position:-17.2rem -0.3rem;opacity:0.7;} @media only screen and (max-width:983px){ .btn-icon1 {width:4.4rem;height:4.4rem;} .btn-icon1.ic1:before {transform:scale(0.9);} } /* 버튼그룹1 */ .btn-set1 {display:flex;justify-content:space-between;margin:2.0rem 0 0;} .btn-set1 > a, .btn-set1 > button {display:flex;align-items:center;justify-content:center;flex:1;padding:0 1.0rem;font-size:1.4rem;line-height:7.5rem;background:#F6F7FA;color:var(--g1);border-radius:0.5rem;} .btn-set1 > a span, .btn-set1 > button span {min-width:7.1rem;text-align:center;} .btn-set1 [class*="ic"]:before {content:'';background:var(--img1);width:4.0rem;height:3.5rem;margin:0 0.5rem 0 0;} .btn-set1 .ic1:before {background-position:0 -7.4rem;} .btn-set1 .ic2:before {background-position:-4.0rem -7.4rem;} .btn-set1 .ic3:before {background-position:-8.0rem -7.4rem;} .btn-set1 .ic4:before {background-position:-12.0rem -7.4rem;} @media only screen and (min-width:769px){ .btn-set1 {gap:0.5rem;} .btn-set1 [class*="ic"]:before {margin:0;} .btn-set1 > a, .btn-set1 > button {gap:0 0.7rem;justify-content:center;} .btn-set1 > a span, .btn-set1 > button span {min-width:0;} } @media only screen and (min-width:984px){ .btn-set1 {margin:3.0rem 0 0;} .btn-set1 > a, .btn-set1 > button {font-size:2.0rem;line-height:9.4rem;} .btn-set1 [class*="ic"]:before {width:5.8rem;height:5.0rem;background-size:69.6rem 69.6rem;} .btn-set1 .ic1:before {background-position:0 -10.7rem;} .btn-set1 .ic2:before {background-position:-5.8rem -10.7rem;} .btn-set1 .ic3:before {background-position:-11.6rem -10.7rem;} .btn-set1 .ic4:before {background-position:-17.4rem -10.7rem;} } @media only screen and (min-width:1680px){ .btn-set1 {gap:1.4rem;margin:4.0rem 0 0;} .btn-set1 > a span, .btn-set1 > button span {min-width:10.2rem;} } @media only screen and (max-width:983px){ .btn-set1 > a, .btn-set1 > button {font-size:1.4rem;line-height:7.5rem;} } @media only screen and (max-width:768px){ .btn-set1 {flex-wrap:wrap;gap:1.0rem;margin:2.0rem 0 0;} .btn-set1 > a, .btn-set1 > button {width:calc(50% - 0.5rem);flex:none;} } /* 버튼그룹2 */ .btn-set2 {display:flex;justify-content:center;gap:0 6.0rem;margin:4.0rem 0 0;} .btn-set2 a, .btn-set2 button {position:relative;font-size:var(--font1);} .btn-set2 * + *:before {content:'';position:absolute;left:-3.0rem;top:50%;width:0.1rem;height:var(--font1);background:var(--line3);transform:translateY(-50%);} @media only screen and (min-width:984px){ .btn-set2 {gap:0 4.0rem;} .btn-set2 * + *:before {left:-2.0rem;} } /* -------------------------------------------------------------------------------- COMPONENT : BUTTON AREA --------------------------------------------------------------------------------- */ [class*="area-btn"] {display:flex;margin:2.0rem 0 0;} [class*="area-btn"] [class*="btn-"] + [class*="btn-"] {margin:0 0 0 var(--space3);} .area-action {display:flex;justify-content:center;margin:var(--space2) 0 0;} .area-action [class*="btn-action"] {flex:1;} @media only screen and (min-width:984px){ .area-action[data-area="side"] {position:relative;} .area-action[data-area="side"] [class*="btn-"] + [class*="btn-"] {position:absolute;right:0;top:0;min-width:19.0rem;} } @media only screen and (max-width:983px){ .area-action[data-area="side"] {flex-direction:column;align-items:center;} .area-action[data-area="side"] [class*="btn-"] {width:100%;} .area-action[data-area="side"] [class*="btn-"] + [class*="btn-"] {max-width:50%;margin:3.0rem 0 0;} } /* 중앙정렬 */ .area-btn1 {justify-content:center;margin:2.0rem 0 0;} .area-btn1 [class*="btn-com"], .area-btn1 [class*="btn-action"] {flex:1;} .line1 + .area-btn1 {margin:4.0rem 0 0;} /* 좌측정렬 */ .area-btn2 {justify-content:start;margin:2.5rem 0 0;} /* 우측정렬 */ .area-btn3 {justify-content:end;} /* 세로블럭 */ .area-btn4 {flex-direction:column;} .area-btn4 [class*="btn-"] + [class*="btn-"] {margin:0.5rem 0 0;} @media only screen and (min-width:984px){ .area-action [class*="btn-action"] {max-width:41.0rem;} .area-btn4 [class*="btn-"] + [class*="btn-"] {margin:1.0rem 0 0;} } @media only screen and (max-width:983px){ .area-btn2 .btn-com1 {flex:1;} } /* -------------------------------------------------------------------------------- COMPONENT : TAB --------------------------------------------------------------------------------- */ .nav-tab1 ul {display:flex;line-height:var(--com4);border-radius:1.0rem 1.0rem 0 0;} .nav-tab1 ul > li {flex:1;text-align:center;background:var(--bg2);} .nav-tab1 ul > li:nth-child(1), .nav-tab1 ul > li:nth-child(1) a {border-radius:1.0rem 0 0 0;} .nav-tab1 ul > li:last-child, .nav-tab1 ul > li:last-child a {border-radius:0 1.0rem 0 0;} .nav-tab1 ul > li a {display:block;border-bottom:0.1rem solid var(--line3);} .nav-tab1 ul > li a[aria-selected="true"], .nav-tab1 ul > li a[aria-current="page"] {background:#fff;border:0.1rem solid var(--line3);border-bottom:0;font-weight:900;} @media only screen and (min-width:984px){ .nav-tab1 ul > li {max-width:27.5rem;} } @media only screen and (max-width:983px){ .nav-tab1 {margin:0 0 3.0rem;} } .nav-tab2 {overflow-x:auto;padding:0 0 0.4rem;} .nav-tab2 ul {white-space:nowrap;white-space:nowrap;} .nav-tab2 ul > li {display:inline-block;background:#F6F7FA;border-radius:0.5rem;white-space:normal;height:7.4rem;vertical-align:top;font-size:1.8rem;line-height:2.3rem;} .nav-tab2 ul > li + li {margin:0 0 0 1.0rem;} .nav-tab2 ul > li a {display:flex;align-items:center;padding:0 3.0rem;border-radius:0.5rem;max-width:22rem;height:100%;text-align:center;} .nav-tab2 ul > li a:hover, .nav-tab2 ul > li a:focus {background:#0C0B15;color:#fff;} .nav-tab2::-webkit-scrollbar {height:1rem;} .nav-tab2::-webkit-scrollbar-track {background-color:transparent;border-radius:0.2rem;} .nav-tab2::-webkit-scrollbar-thumb {background-color:var(--g4);} @media only screen and (max-width:983px){ .nav-tab2 ul > li {height:5.4rem;font-size:1.4rem;line-height:1.8rem;} } .tab-sub1 {overflow-x:scroll;padding:0 0 0.5rem;margin:0 0 4.0rem;} .tab-sub1::-webkit-scrollbar {height:0.2rem;} .tab-sub1::-webkit-scrollbar-track {background-color:transparent;border-radius:0.2rem;} .tab-sub1::-webkit-scrollbar-thumb {background-color:var(--g4);} .tab-sub1 > ul {display:flex;flex-shrink:1;} .tab-sub1 > ul > li {min-width:8.6rem;max-width:20.0rem;white-space:nowrap;} .tab-sub1 > ul > li[role="tab"], .tab-sub1 > ul > li > a {padding:0 1.5rem;font-size:var(--font1);line-height:calc(var(--com2) - 0.4rem);border:0.1rem dashed var(--line2);text-align:center;transition:border 0.3s ease-in-out;} .tab-sub1 > ul > li[role="tab"]:hover, .tab-sub1 > ul > li > a:hover {border-color:var(--g1);} .tab-sub1 > ul > li > a {display:block;} .tab-sub1 > ul > li, .tab-sub1 > ul > li > a {color:var(--b1);} .tab-sub1 > ul > li + li {margin:0 0 0 0.3rem;} .tab-sub1 > ul > li[role="tab"][aria-selected="true"], .tab-sub1 > ul > li > a[aria-current="page"] {background:var(--line1);border:1px solid var(--line1);box-shadow:0 0.3rem 0.3rem rgba(0, 0, 0, 0.16);color:#fff;font-weight:700;} @media only screen and (min-width:984px){ .tab-sub1 {margin:0 0 var(--space1);} .tab-sub1 > ul > li {min-width:16.0rem;} .tab-sub1 > ul > li[role="tab"], .tab-sub1 > ul > li > a {padding:0 3.0rem;} .tab-sub1 > ul > li + li {margin:0 0 0 0.3rem;} } @media only screen and (min-width:1880px){ .tab-sub1 > ul > li {min-width:17.5rem;} } /* -------------------------------------------------------------------------------- COMPONENT : PAGENATION --------------------------------------------------------------------------------- */ .nav-pagenation {position:relative;margin:3.0rem 0 0 0;text-align:center;white-space:nowrap;justify-content:center;} .nav-pagenation a {position:relative;display:inline-block;vertical-align:top;min-width:2em;font-size:var(--font1);line-height:2;color:#828692;font-weight:500;} .nav-pagenation a:hover, .nav-pagenation a:focus {color:var(--g1);} .nav-pagenation a[aria-current="page"] {color:var(--g1);font-weight:900;} .nav-pagenation a[aria-current="page"]:before {content:'';position:absolute;left:1.0rem;right:0.9rem;bottom:0;border:0.2rem solid var(--g1);} .nav-pagenation a[aria-disabled="true"] {opacity:0.2;pointer-events:none;} .nav-pagenation .btn {width:0;padding:0 0 0 2em;overflow:hidden;color:transparent;} .nav-pagenation .btn:before, .nav-pagenation .btn[data-btn="first"]:after, .nav-pagenation .btn[data-btn="last"]:after {content:'';position:absolute;top:50%;} .nav-pagenation .btn:before {left:50%;transform:translate(-50%, -50%);width:2.0rem;height:2.0rem;background:var(--img1);background-position:-8.0rem -2.4rem;} .nav-pagenation .btn[data-btn="first"]:before, .nav-pagenation .btn[data-btn="before"]:before {transform:translate(-50%, -50%) rotate(180deg);} .nav-pagenation .btn[data-btn="first"]:after, .nav-pagenation .btn[data-btn="last"]:after {width:0.1rem;height:0.9em;background:var(--g1);transform:translateY(-50%);} .nav-pagenation .btn[data-btn="first"]:after {right:calc(50% + 0.8rem);} .nav-pagenation .btn[data-btn="last"]:after {left:calc(50% + 0.8rem);} @media only screen and (min-width:984px){ .nav-pagenation {margin:5.0rem 0 0;} .nav-pagenation .btn + a:not(.btn), .nav-pagenation a:not(.btn) + .btn {margin-left:5.0rem;} } @media only screen and (max-width:983px){ .nav-pagenation .btn {position:absolute;} .nav-pagenation .btn[data-btn="first"] {left:0;} .nav-pagenation .btn[data-btn="before"] {left:2em;} .nav-pagenation .btn[data-btn="last"] {right:0;} .nav-pagenation .btn[data-btn="next"] {right:2em;} } /* -------------------------------------------------------------------------------- COMPONENT : STEP INFOMATION --------------------------------------------------------------------------------- */ /* 유형1 */ .info-step1 > ol {display:flex;font-size:var(--font2);line-height:2.4rem;counter-reset:cnt;white-space:nowrap;} .info-step1 > ol > li {position:relative;display:flex;padding:2.0rem 0.2rem 2.0rem 0;font-weight:700;color:#ACB1C0;border-bottom:0.1rem solid transparent;} .info-step1 > ol > li:before, .info-step1 > ol > li:not(:last-child):after {content:'';display:inline-block;} .info-step1 > ol > li:before {content:counter(cnt);counter-increment:cnt;width:2.4rem;height:2.4rem;margin:0 var(--space3) 0 0;border-radius:100%;background:#ACB1C0;color:#fff;text-align:center;font-weight:700;text-indent:-0.1rem;} .info-step1 > ol > li:after {position:absolute;right:-3.2rem;top:2.3rem;width:0.1rem;height:1.6rem;transform:rotate(-45deg);background:#ACB1C0;} .info-step1 > ol > li + li {margin:0 0 0 6.2rem;} .info-step1 > ol > li[aria-current="step"] {border-color:var(--g1);color:var(--g1);} .info-step1 > ol > li[aria-current="step"]:before {background:var(--g1);} @media only screen and (max-width:983px){ .info-step1 > ol {line-height:2.1rem;} .info-step1 > ol > li {padding:0 0.2rem 1.5rem 0;} .info-step1 > ol > li:before {width:2.1rem;height:2.1rem;} .info-step1 > ol > li[aria-current="step"] {border-bottom:0.2rem solid var(--g1);} .info-step1 > ol > li:not([aria-current="step"]):before {margin:0;} .info-step1 > ol > li:not([aria-current="step"]) span {width:0;overflow:hidden;white-space:nowrap;} .info-step1 > ol > li + li {margin:0 0 0 3.0rem;} .info-step1 > ol > li:after {right:-1.4rem;top:0.3rem;height:1.2rem;transform:rotate(-47deg);} } /* 유형2 */ .info-step2 > ol {display:flex;} .info-step2 > ol > li {position:relative;text-align:center;} .info-step2 > ol > li:before, .info-step2 > ol > li:after {content:'';display:block;position:absolute;} .info-step2 > ol > li:after {left:50%;top:0;margin:0 auto;background:url(../../images/com/set2.png) no-repeat 0 0;background-size:auto 100%;transform:translateX(-50%);} @media only screen and (min-width:984px){ .info-step2 {text-align:center;} .info-step2 > ol {position:relative;justify-content:space-between;max-width:116.0rem;margin:0 auto;} .info-step2 > ol:after {content:'';position:absolute;left:0;right:0;top:6.7rem;height:0.1rem;background:var(--line3);} .info-step2 > ol > li {width:13.5rem;padding:15.8rem 0 0;font-size:2.3rem;line-height:3.0rem;} .info-step2 > ol > li:before, .info-step2 > ol > li:after {z-index:1;} .info-step2 > ol > li:before {position:absolute;left:0;right:0;top:0;width:13.3rem;height:13.3rem;border:0.1rem solid var(--line3);border-radius:100%;background:#fff;} .info-step2 > ol > li:after {width:7.0rem;height:7.0rem;margin:3.2rem 0;z-index:1;} .info-step2.info1 > ol > li:nth-child(1):after {background-position:0 0;} .info-step2.info1 > ol > li:nth-child(2):after {background-position:-7.0rem 0;} .info-step2.info1 > ol > li:nth-child(3):after {background-position:-14.0rem 0;} .info-step2.info1 > ol > li:nth-child(4):after {background-position:-21.0rem 0;} .info-step2.info1 > ol > li:nth-child(5):after {background-position:-28.0rem 0;} } @media only screen and (min-width:1680px){ .info-step2 > ol:after {top:9.3rem;} .info-step2 > ol > li {width:18.8rem;padding:21.4rem 0 0;} .info-step2 > ol > li:before {width:18.6rem;height:18.6rem;} .info-step2 > ol > li:after {width:9.4rem;height:9.4rem;margin:4.7rem 0;} .info-step2.info1 > ol > li:nth-child(1):after {background-position:0 0;} .info-step2.info1 > ol > li:nth-child(2):after {background-position:-9.4rem 0;} .info-step2.info1 > ol > li:nth-child(3):after {background-position:-18.8rem 0;} .info-step2.info1 > ol > li:nth-child(4):after {background-position:-28.2rem 0;} .info-step2.info1 > ol > li:nth-child(5):after {background-position:-37.6rem 0;} } @media only screen and (max-width:983px){ .info-step2 > ol {justify-content:space-around;} .info-step2 > ol > li {line-height:2.4rem;flex:1;padding:5.5rem 0 0;} .info-step2 > ol > li span {position:relative;padding:0 1.2rem;background:#fff;z-index:1;} .info-step2 > ol > li:after {left:50%;top:0;width:5.2rem;height:5.2rem;transform:translateX(-50%);} .info-step2 > ol > li + li:before {left:-50%;right:50%;bottom:1.0rem;height:0.1rem;background:var(--line3);} .info-step2.info1 > ol > li:nth-child(1):after {background-position:0 0;} .info-step2.info1 > ol > li:nth-child(2):after {background-position:-5.2rem 0;} .info-step2.info1 > ol > li:nth-child(3):after {background-position:-10.4rem 0;} .info-step2.info1 > ol > li:nth-child(4):after {background-position:-15.6rem 0;} .info-step2.info1 > ol > li:nth-child(5):after {background-position:-20.8rem 0;} } /* -------------------------------------------------------------------------------- COMPONENT : FORM ELEMENT : INPUT / SELECT --------------------------------------------------------------------------------- */ :-ms-input-placeholder {color:var(--g3) !important;} ::-ms-input-placeholder {color:var(--g3) !important;} ::-webkit-input-placeholder {color:var(--g3) !important;} ::placeholder {color:var(--g3) !important;} [class*="el-text"], [class*="el-select"] {display:inline-block;vertical-align:top;width:15.0rem;font-size:var(--font1);line-height:calc(var(--com2) - 2.2rem);color:var(--g1);background:#fff;border:1px solid var(--line3);border-radius:0.2rem;} [class*="el-text"]:focus, [class*="el-select"]:focus, [class*="el-text"]:hover, [class*="el-select"]:hover, [class*="el-text"].focus, [class*="el-select"].focus {outline:0;transition:border 0.3s ease-in-out;} [class*="el-select"] {overflow:hidden;text-overflow:ellipsis;background:#fff url(../../images/com/img_form1.png) no-repeat calc(100% - 1.0rem) 50%;background-size:1.0rem 0.6rem;} [class*="el-select"] optgroup, [class*="el-select"] option {font-size:var(--font1);} [class*="el-text"]:disabled, [class*="el-select"]:disabled, [class*="el-text"][readonly], [class*="el-select"][readonly] {background-color:var(--g5);opacity:1;} [class*="el-text"]:disabled, [class*="el-select"]:disabled {-webkit-text-fill-color:var(--g3);color:var(--g3);} [class*="el-text"][aria-invalid="true"], [class*="el-select"][aria-invalid="true"] {border-color:var(--invalid);} [class*="el-text"][readonly], [class*="el-select"][readonly] {-webkit-text-fill-color:var(--g1);color:var(--g1);} [class*="el-text"][data-format="search"] .text {padding-right:4.0rem;} [class*="el-text"][data-format="search"] [class*="icon"] {position:absolute;right:0.8rem;top:50%;transform:translateY(-50%);} .el-text1, .el-select1 {height:var(--com2);padding:1.0rem 1.5rem;} .el-select1 {padding-right:3.0rem;} .el-text1:focus, .el-select1:focus, .el-text1:hover, .el-select1:hover, .el-text1.focus, .el-select1.focus {border-color:var(--g1);} .el-text2, .el-select2 {height:var(--com4);padding:1.0rem 2.0rem;border-radius:1.0rem;} .el-select2 {padding-right:4.0rem;} .el-text2:focus, .el-text2:hover {border-color:#99CCFF;background-color:#ECF5FF;z-index:1;} [class*="el-textarea"] {display:block;width:100%;color:var(--g1);resize:none;padding:0.5em 1.5rem;font-size:var(--font1);border:1px solid var(--line3);border-radius:0.2rem;} [class*="el-textarea"]:focus, [class*="el-textarea"]:hover {outline:0;border-color:var(--g1);} [class*="el-textarea"]:disabled {background-color:var(--g5);opacity:1;-webkit-text-fill-color:var(--g3);color:var(--g3);} [class*="el-textarea"][aria-invalid="true"] {border-color:var(--invalid);} /* -------------------------------------------------------------------------------- COMPONENT : FORM ELEMENT : RADIO / CHECKBOX --------------------------------------------------------------------------------- */ [class*="el-check"], [class*="el-btn"], [class*="el-toggle"] {display:inline-flex;flex-wrap:wrap;} [class*="el-check"] label, [class*="el-btn"] label, [class*="el-toggle"] label {position:relative;} [class*="el-check"] label > input, [class*="el-btn"] label > input, [class*="el-toggle"] label > input {position:absolute;left:0;right:0;top:0;bottom:0;opacity:0;z-index:-1;width:100%;} [class*="el-check"] label > input ~ span, [class*="el-btn"] label > input ~ span, [class*="el-toggle"] label > input ~ span {position:relative;display:inline-block;font-size:var(--font1);line-height:2.5rem;vertical-align:top;color:var(--g1);} /* 유형1 : 기본 */ .el-check1 {gap:0 3.0rem;} .el-check1 label > input + span {padding:1.0rem 0 1.0rem calc(var(--space3) + 2.3rem);} .el-check1 label > input + span:before, .el-check1 label > input + span:after {content:'';position:absolute;left:0;top:1.1rem;box-sizing:border-box;} .el-check1 label > input + span:before {width:2.3rem;height:2.3rem;border:0.2rem solid var(--line3);z-index:0;border-radius:50%;} .el-check1 label > input:checked + span:before {border-color:var(--g1);} .el-check1 label > input:disabled + span {color:var(--g3);} .el-check1 label > input:disabled + span:before {border-color:var(--line3);background-color:var(--g5);} .el-check1 label > input[type="radio"] + span:after {width:1.1rem;height:1.1rem;margin:0.6rem;border-radius:100%;} .el-check1 label > input[type="radio"]:checked + span:after {background:var(--g1);} .el-check1 label > input[type="radio"]:disabled:checked + span:after {background:var(--line3);} .el-check1 label > input[type="checkbox"] + span:after {width:2.3rem;height:2.3rem;background:var(--img1);background-position:-9.7rem 0;} .el-check1 label > input[type="checkbox"]:checked + span:before {background:var(--g1);} .el-check1 label > input[type="checkbox"]:disabled:checked + span:before {background:var(--line3);} .el-check1 label > input[type="checkbox"]:disabled:not(:checked) + span:after {display:none;} .el-check1 label > input[type="checkbox"]:checked + span:after, .el-check1 label > input[type="checkbox"]:disabled:checked + span:after {background-position:-12.1rem 0;filter:invert() grayscale(1);} .el-check1.simple label {width:2.2rem;overflow:hidden;white-space:nowrap;} .el-check1.simple label > input + span {padding:0 0 0 2.3rem;} .el-check1.simple label > input + span:before, .el-check1.simple label > input + span:after {top:0;} @media only screen and (max-width:983px){ .el-check1.col label > input + span {min-width:9.0rem;} } /* 유형2 : 목록형 */ .el-btn1 {display:block;} .el-btn1 label {display:block;} .el-btn1 label + label {margin:var(--space3) 0 0;} .el-btn1 label > input + span {display:block;padding:1.0rem 1.4rem;border:1px dashed var(--line3);border-radius:0.1rem;line-height:calc(var(--com2) - 2.2rem);white-space:nowrap;transition:border 0.3s ease-in-out;} .el-btn1 label > input:not(:disabled):hover + span {border-color:var(--g1);} .el-btn1 label > input:checked + span {background:var(--g1);border-color:var(--g1);color:#fff;box-shadow:0 0.3rem 0.3rem #00000029;} .el-btn1 label > input:disabled + span {background:var(--g5);color:#9FA4B4;} .el-btn1 label > input:disabled:checked + span {border-color:var(--line3);background:var(--line3);;color:#fff;} /* 유형2 : 목록형 + 데이터유형 : 공통 */ .el-btn1[data-format^="t"] > li {display:flex;align-items:center;} .el-btn1[data-format^="t"] label input + span, .el-btn1[data-format^="t"] div:last-child {font-weight:700;} /* 유형2 : 목록형 + 데이터유형1 */ .el-btn1[data-format="t1"] > li {flex-wrap:wrap;gap:var(--space3) 1.5rem;} .el-btn1[data-format="t1"] > li + li {margin:2.0rem 0 0;padding:2.0rem 0 0;border-top:1px solid var(--line3);} .el-btn1[data-format="t1"] label {width:100%;} .el-btn1[data-format="t1"] .input-time1 + div:last-child {width:100%;padding:0 0 0 1.6rem;} @media only screen and (min-width:984px){ .el-btn1[data-format="t1"] .input-time1 + div:last-child {width:100%;margin:0 0 -1.0rem;text-align:left;} } @media only screen and (min-width:1200px){ .el-btn1[data-format="t1"] .input-time1 + div:last-child {width:auto;flex:1;text-align:right;margin:0;} } @media only screen and (min-width:2400px){ .el-btn1[data-format="t1"] > li {flex-wrap:none;} .el-btn1[data-format="t1"] label {flex:none;width:calc(50% - 1.2rem);} .el-btn1[data-format="t1"] .input-time1 + div:last-child {width:auto;flex:1;text-align:right;margin:0;} } @media only screen and (min-width:870px) and (max-width:983px){ .el-btn1[data-format="t1"] > li {flex-wrap:none;} .el-btn1[data-format="t1"] label {width:calc(50% - 1.2rem);} .el-btn1[data-format="t1"] .input-time1 + div:last-child {width:auto;flex:1;text-align:right;} } @media only screen and (min-width:620px) and (max-width:869px){ .el-btn1[data-format="t1"] label {width:auto;flex:1;} } @media only screen and (min-width:481px) and (max-width:619px){ .el-btn1[data-format="t1"] .input-time1 + div:last-child {width:auto;flex:1;text-align:right;} } /* 유형2 : 목록형 + 데이터유형2 */ .el-btn1[data-format="t2"] > li {justify-content:space-between;gap:var(--space3) 0;} .el-btn1[data-format="t2"] > li + li {margin:var(--space3) 0 0;} .el-btn1[data-format="t2"] label {width:31.0rem;} .el-btn1[data-format="t2"] div:last-child {text-align:right;padding:0 0 0 1.6rem;} /* 유형2 : 목록형 + 데이터유형3 */ .el-btn1[data-format="t3"] {display:flex;gap:var(--space3);} .el-btn1[data-format="t3"] > li {display:block;} .el-btn1[data-format="t3"] > li label {text-align:center;} @media only screen and (min-width:984px){ .el-btn1[data-format="t3"] > li {width:calc(50% - (var(--space3) / 2));} } @media only screen and (max-width:983px){ .el-btn1[data-format="t3"] > li {width:calc(25% - (var(--space3) * 3 / 4))} } @media only screen and (max-width:768px){ .el-btn1[data-format="t3"] > li {width:calc(33.3% - (var(--space3) * 2 / 3))} } @media only screen and (max-width:560px){ .el-btn1[data-format="t3"] > li {width:calc(50% - (var(--space3) / 2));} } /* 유형2 : 목록형 + 데이터유형 : 영역추가스타일 */ @media only screen and (min-width:984px) and (max-width:1180px){ .form-wrap1 .el-btn1[data-format="t2"] > li {flex-wrap:wrap;gap:var(--space3) 0;} .form-wrap1 .el-btn1[data-format="t2"] label {width:auto;flex:1;max-width:100%;} .form-wrap1 .el-btn1[data-format="t2"] > li + li {margin:2.0rem 0 0;padding:2.0rem 0 0;border-top:1px solid var(--line3);} } @media only screen and (max-width:983px){ [class*="form-wrap"] .el-btn1[data-format="t2"] label {flex:1;width:auto;} [class*="form-wrap"] .el-btn1[data-format="t2"] div:last-child {width:26%;} } @media only screen and (max-width:480px){ [class*="form-wrap"] .el-btn1[data-format="t2"] > li {flex-direction:column;gap:var(--space3) 0;} [class*="form-wrap"] .el-btn1[data-format="t2"] label {width:100%;flex:none;} [class*="form-wrap"] .el-btn1[data-format="t2"] div:last-child {width:100%;text-align:left;} [class*="form-wrap"] .el-btn1[data-format="t2"] > li + li {margin:2.0rem 0 0;padding:2.0rem 0 0;border-top:1px solid var(--line3);} } /* 토글형1 */ .el-toggle1 label {position:relative;display:inline-block;} .el-toggle1 label > input {opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;} .el-toggle1 label > input + span {position:relative;z-index:1;display:block;min-width:5.2rem;padding:0.3rem 0.7rem 0.3rem 2.3rem;font-size:1.2rem;line-height:1;text-align:right;transition:all 0.2s ease-in-out;} .el-toggle1 label > input + span, .el-toggle1 label > input + span::selection {color:var(--g3);} .el-toggle1 label > input + span:before, .el-toggle1 label > input + span:after {content:'';box-sizing:border-box;display:block;position:absolute;top:50%;transform:translateY(-50%)} .el-toggle1 label > input + span:before {left:0;right:0;z-index:-1;height:2.7rem;border:0.2rem solid var(--line3);border-radius:2.0rem;transition:all 0.2s ease-in-out;} .el-toggle1 label > input + span:after {left:0.5rem ;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--line3);background-position:-12.1rem 0;transition:left 0.3s ease-in-out;} .el-toggle1 label > input:checked + span, .el-toggle1 label > input:checked + span::selection {color:transparent;} .el-toggle1 label > input:checked + span:before {background:var(--g1);border-color:var(--g1);} .el-toggle1 label > input:checked + span:after {left:calc(100% - 2.5rem);width:2.1rem;height:2.1rem;background:#fff var(--img1);background-position:-12.2rem -0.1rem;} .el-toggle1 label > input:disabled:not(:checked) + span, .el-toggle1 label > input:disabled:not(:checked) + span::selection {color:transparent;} .el-toggle1 label > input:disabled:not(:checked) + span:before {background:var(--g5);} .el-toggle1 label > input:checked:disabled + span:before {background:var(--line3);border-color:var(--line3);} .el-toggle1 label > input:checked:disabled + span:after {background-position:-9.7rem 0;} @media only screen and (min-width:984px){ .el-toggle1 label > input + span {min-width:6.3rem;padding:0.3rem 1.0rem 0.3rem 2.8rem;font-size:1.4rem;line-height:2.4rem;} .el-toggle1 label > input + span:before {height:3.0rem;border-radius:2.4rem;} .el-toggle1 label > input + span:after {width:2.0rem;height:2.0rem;} .el-toggle1 label > input:checked + span:after {left:calc(100% - 2.8rem);width:2.4rem;height:2.4rem;background-position:-12.1rem 0;} } /* 토글형1 */ .el-tab1 {display:inline-flex;background:#DDE0E5;border-radius:0.7rem;} .el-tab1 label {position:relative;display:inline-block;} .el-tab1 label > input {opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;} .el-tab1 label > input + span {position:relative;display:block;padding:0 2.7rem;font-size:var(--font1);line-height:var(--com2);color:var(--g1);border-radius:0.5rem;} .el-tab1 label > input:checked + span {display:flex;align-items:center;color:#fff;padding:0 2.5rem;background:var(--g1);font-weight:700;box-shadow:0 0.3rem 0.3rem rgba(0, 0, 0, 0.16);} .el-tab1 label > input:checked + span:after {content:'';width:1.3rem;height:0.9rem;margin:0 -1.0rem 0 1.0rem;background:var(--img1);background-position:-15.0rem -0.8rem;} @media only screen and (min-width:984px){ .el-tab1 label > input + span {padding:0 4.0rem;} .el-tab1 label > input:checked + span {padding:0 2.5rem;} .el-tab1 label > input:checked + span:after {margin:0 0 0 0.8rem;} } /* -------------------------------------------------------------------------------- COMPONENT : FORM ELEMENT : file --------------------------------------------------------------------------------- */ .el-file1 {display:flex;gap:var(--space3);overflow:hidden;} .el-file1 label {position:relative;display:inline-block;} .el-file1 label input {position:absolute;opacity:0;z-index:-1;width:100%;height:100%;} .el-file1 .upload {position:relative;max-width:100%;display:block;padding:0 8.0rem 0 2.0rem;font-size:1.3rem;line-height:calc(var(--com2) - 0.2rem);border:1px dashed var(--line2);} .el-file1 .upload span:nth-child(1) {display:inline-block;vertical-align:top;color:#90A0FF;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap;} .el-file1 .upload span:nth-child(2) {position:absolute;right:1.0rem;top:50%;transform:translateY(-50%);} .el-file1 .upload-area {width:100%;display:flex;flex-wrap:wrap;gap:var(--space3);} .el-file1 .info {color:#9FA4B4;font-size:var(--form1);line-height:2.4rem;} .el-file1 .upload[role="button"] {display:block;padding:0 5.6rem 0 2.0rem;color:#90A0FF;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font1);} .el-file1 .upload[role="button"]:before {content:'';display:block;position:absolute;right:1.0rem;top:50%;width:3.0rem;height:3.0rem;background:var(--img1);background-position:-10.5rem -4.4rem;transform:translateY(-50%);} .el-file1 .upload[role="button"]:hover, .el-file1 .upload[role="button"]:focus {border-color:var(--line1);} dl.el-file1 > dt {overflow:hidden;position:absolute;left:-0.1rem;top:-0.1rem;width:0.1rem;height:0.1rem;opacity:0;} dl.el-file1 > dd {flex:1;display:flex;flex-direction:column;gap:var(--space3) 0;} .el-file1.el-form1 .upload-area [data-fileupload="area"] {width:calc(100% - 8.6rem - var(--space3))} .el-file1.el-form1 .upload-area [data-fileupload="area"]:empty ~ [data-btn="submit"] {display:none;} .el-file1.el-form1 .info {width:100%;} .info-con2 dl.data .el-file1 {width:100%;} .info-con2 dl.data .el-file1 .upload {max-width:50.0rem;} .info-con2 dl.data .data-t3 + .el-file1 {margin:2.0rem 0 0;} .info-con2 dl.data .el-file1.list1 .upload {max-width:100%;width:100%;padding-right:5.6rem;} .info-con2 dl.data .el-file1.list1 .upload:before {content:'';display:block;position:absolute;right:1.0rem;top:50%;width:3.0rem;height:3.0rem;background:var(--img1);background-position:-10.5rem -4.4rem;transform:translateY(-50%);} @media only screen and (min-width:1281px) { .info-con2 dl.data .el-file1 .upload {width:calc(50% - (var(--space3) / 2));max-width:50.0rem;} } @media only screen and (max-width:560px){ .el-file1.el-form1 .upload-area {flex-direction:column;} .el-file1.el-form1 .upload-area [data-fileupload="area"] {width:100%;} } @media only screen and (min-width:1281px) { .el-file1 {flex-wrap:wrap;} .el-file1 .el-text1:nth-child(1) {width:43.0rem;} } @media only screen and (min-width:1600px) { .el-file1.el-form1 {position:relative;} .el-file1.el-form1 .info {display:flex;flex-wrap:wrap;position:absolute;left:11.6rem;right:0;top:0;height:var(--com2);align-items:center;} } @media only screen and (max-width:1280px) { .el-file1 {flex-wrap:wrap;align-items:flex-end} .el-file1 .el-text1:nth-child(1) {width:auto;flex:1;max-width:100%;} .el-file1 .upload {width:100%;} } @media only screen and (min-width:984px) and (max-width:1280px) { .el-file1 .input-label1 {flex-direction:column;gap:var(--space3);} .el-file1 .input-label1 > * {gap:0;} .el-file1 .input-label1 > * span {min-width:10.0rem;} .el-file1 .input-label1 > * span + [class*="el-"] {flex:none;width:auto;} } @media only screen and (max-width:840px){ .el-file1 .input-label1 {flex-direction:column;gap:var(--space3);} .el-file1 .input-label1 > * {gap:0;} .el-file1 .input-label1 > * span {min-width:10.0rem;} .el-file1 .input-label1 > * span + [class*="el-"] {flex:none;width:auto;} .el-file1 .input-label1 ~ .upload-area {padding:0 0 0 10.0rem;} } @media only screen and (max-width:480px){ .el-file1 .input-label1 {width:100%;} .el-file1 .input-label1 > * span + [class*="el-"] {flex:1;} .el-file1 .input-label1 ~ label {margin:0 0 0 10.0rem;} } /* -------------------------------------------------------------------------------- COMPONENT : FORM ELEMENT : 가변형 --------------------------------------------------------------------------------- */ /* 유형1 */ .input-wrap1 {display:flex;} .input-wrap1 [class*="el-"] {font-weight:700;} /* 테두리 애니메이션 */ @keyframes borderAnimation { 0% { border-color: #99CCFF; } 50% { border-color: #00c48c; } 100% { border-color: #99CCFF; } } .sel-focus1 {border:1px solid #99CCFF; background-color:#ECF5FF; animation: borderAnimation 5s infinite; /* 애니메이션 적용 */} @media only screen and (min-width:984px){ .input-wrap1 [class*="el-"] + [class*="el-"], .input-wrap1 [class*="el-"] + [class*="btn-"] {margin:0 0 0 var(--space3);} .input-wrap1[data-format="t1"] [class*="el-"] {min-width:24%;} .input-wrap1[data-format="t1"] [class*="el-"]:nth-child(2) {flex:1;} .input-wrap1[data-format="t2"] {justify-content:flex-end;} .input-wrap1[data-format="t2"] [class*="el-"] {width:auto;min-width:20.0rem;} .input-wrap1[data-format="t2"] [class*="el-"]:nth-child(2) {max-width:calc(100% - 28.0rem - var(--space3));} } @media only screen and (max-width:983px){ .input-wrap1 {flex-direction:column;} .input-wrap1 [class*="el-"], .input-wrap1 [class*="btn-"] {flex:1;width:auto;} .input-wrap1 [class*="el-"] + [class*="el-"], .input-wrap1 [class*="el-"] + [class*="btn-"] {margin:1.0rem 0 0;} } /* 유형2 */ .input-wrap2 {position:relative;display:flex;align-items:center;} .input-wrap2 [class*="el-"] {width:7.0rem;padding-left:0;text-align:right;} .input-wrap2 [class*="el-"] ~ span {font-size:var(--font2);} .input-wrap2 [class*="el-"] ~ span, .input-wrap2 span ~ [class*="el-"] {margin:0 0 0 var(--space3)} /* 유형3 */ .input-wrap3 {display:flex;} .input-wrap3 [class*="el-"] {flex:1;} .input-wrap3 [class*="el-"] + [class*="el-"] {margin:0 0 0 var(--space3);} /* 유형4 */ .input-wrap4 {display:flex;flex-wrap:wrap;gap:var(--space3);} .input-wrap4 .el-text1:nth-child(1) {flex:1;width:auto;max-width:100%;} @media only screen and (min-width:1281px) { .input-wrap4 .el-text1:nth-child(1) {max-width:43.0rem;} .input-wrap4 .el-text1:nth-child(1) ~ [class*="btn-sub"] {min-width:14.4rem;} } @media only screen and (min-width:984px) { .input-wrap4 .el-text1:nth-child(1) ~ [class*="btn-sub"] {min-width:14.4rem;} } @media only screen and (max-width:983px) { .input-wrap4 .el-text1:nth-child(1) ~ [class*="btn-sub"] {min-width:9.6rem;} } /* 유형5 */ .input-wrap5 {display:flex;flex-wrap:wrap;gap:var(--space3);} .input-wrap5 .info {color:var(--g3);} @media only screen and (min-width:984px) { .input-wrap5 {align-items:center;gap:0 3.0rem;} .input-wrap5 .el-text1:nth-child(1) {width:23.0rem;} .input-wrap5 .info {max-width:calc(100% - 26.0rem);} } @media only screen and (max-width:983px) { .input-wrap5 {flex-direction:column;} .input-wrap5 .el-text1:nth-child(1) {width:100%} } /* 유형6 */ .input-wrap6 {position:relative;display:flex;gap:0 var(--space3);} .input-wrap6 [class*="el-"] {flex:1;width:auto;min-width:0;} .input-wrap6[data-unit] {justify-content:space-between;gap:0 calc(var(--space3) * 3);} .input-wrap6[data-unit]:before {content:attr(data-unit);position:absolute;left:50%;top:0;line-height:var(--com2);transform:translateX(-50%);} @media only screen and (min-width:984px) { .input-wrap6[data-unit] {max-width:47.0rem;} } /* 유형6 */ .input-wrap7 {display:flex;flex-direction:column;gap:1.0rem 0;} .input-wrap7 > [class*="el-"] {flex:1;width:auto;min-width:0;} @media only screen and (min-width:984px) { .input-wrap7 {gap:2.0rem 0;} } /* 라벨형1 */ .input-label1 {display:flex;} .input-label1 > * {display:flex;} .input-label1 > * span {line-height:var(--com2);} .input-label1 > * span + [class*="el-"] {flex:1;} @media only screen and (min-width:769px){ .input-label1 {gap:0 3.0rem;} .input-label1 > * {gap:0 3.0rem;flex:1;} .input-label1 > * [class*="el-"] {width:100%;} } @media only screen and (min-width:1024px){ .input-label1 > * {flex:none} .input-label1 > * [class*="el-"] {min-width:21.0rem;} } @media only screen and (min-width:1441px){ .input-label1 {gap:0 6.0rem;} } @media only screen and (max-width:768px){ .input-label1 {flex-direction:column;gap:var(--space3) 0;} .input-label1 > * span {width:6.0rem;} .input-wrap3 {flex-direction:column;} .input-wrap3 [class*="el-"] + [class*="el-"] {margin:var(--space3) 0 0;} } /* 버튼형 */ .input-btn1 {position:relative;} .input-btn1 input {padding-right:5.2rem;} .input-btn1 [class*="icon-"] {position:absolute;right:2.0rem;top:50%;transform:translateY(-50%);} .input-btn1[data-visible] [data-modebtn] {display:none;} .input-btn1[data-value="true"][data-visible="visible"] [data-modebtn="visible"] {display:none;} .input-btn1[data-value="true"][data-visible="visible"] [data-modebtn="hidden"] {display:block;} .input-btn1[data-value="true"][data-visible="hidden"] [data-modebtn="visible"] {display:block;} .input-btn1[data-value="true"][data-visible="hidden"] [data-modebtn="hidden"] {display:none;} /* -------------------------------------------------------------------------------- COMPONENT : FORM ELEMENT : 고정형 --------------------------------------------------------------------------------- */ /* 이메일 */ .input-email1 {display:flex;position:relative;gap:var(--space3);} .input-email1:before {content:'@';position:absolute;line-height:var(--com2);} @media only screen and (min-width:984px){ .input-email1 [class*="el-"]:nth-child(1) {width:23.0rem;} .input-email1 [class*="el-"]:nth-child(1) ~ [class*="el-"] {width:15.0rem;} .input-email1 [class*="el-"]:nth-child(2) {margin:0 0 0 2.5rem;} .input-email1:before {left:23.0rem;width:3.5rem;text-align:center;} } @media only screen and (max-width:983px){ .input-email1 {flex-wrap:wrap;justify-content:flex-end;} .input-email1 [class*="el-"]:nth-child(1) {width:100%;} .input-email1 [class*="el-"]:nth-child(2) {width:47%;} .input-email1 [class*="el-"]:nth-child(3) {width:calc(53% - 3.0rem);} .input-email1:before {left:0;bottom:0;} } /* 주소 */ .input-addr1 {display:flex;flex-wrap:wrap;gap:var(--space3);} @media only screen and (min-width:1440px){ .input-addr1 [class*="el-"]:nth-last-child(2) {width:45%;} .input-addr1 [class*="el-"]:nth-last-child(1) {flex:1;} } @media only screen and (min-width:769px){ .input-addr1 button, .input-addr1 button + [class*="el-"] {width:10.0rem;} .input-addr1 [class*="el-"]:nth-last-child(2) {flex:1;} .input-addr1 [class*="el-"]:nth-last-child(1) {width:100%;/*max-width:42.0rem;*/} } @media only screen and (max-width:768px){ .input-addr1 button {width:10.0rem;} .input-addr1 button + [class*="el-"] {width:calc(100% - 10.7rem);} .input-addr1 [class*="el-"]:nth-last-child(2), .input-addr1 [class*="el-"]:nth-last-child(1) {width:100%;} } /* 날짜형 : 날짜선택 */ .input-date1 {position:relative;display:flex;} .input-date1 div {position:relative;} .input-date1 div:nth-child(2) {width:2.4rem;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);text-align:center;} .input-date1 div:not([aria-hidden="true"]) {width:calc(50% - 1.2rem);} .input-date1 div [class*="el-text"] {width:100%;} .input-date1 div ~ div:not([aria-hidden="true"]) {margin:0 0 0 2.4rem;} .input-date1 div .ui-datepicker-trigger {overflow:hidden;display:block;position:absolute;right:0.8rem;top:50%;transform:translateY(-50%);width:2.4rem;font-size:0.1rem;line-height:1;white-space:nowrap;} .input-date1 div .ui-datepicker-trigger:before {content:'';display:inline-block;width:2.4rem;height:2.4rem;background:var(--img1);background-position:-7.2rem 0;} @media only screen and (min-width:1441px){ .input-date1 {display:inline-flex;} .input-date1 div:not([aria-hidden="true"]) {width:17.2rem;} .input-date1 div ~ div:not([aria-hidden="true"]) {margin:0 0 0 4.5rem;} } /* 날짜형 : 셀렉트형 */ .input-time1 {position:relative;display:flex;align-items:center;} .input-time1 [class*="el-"] {width:6.5rem;} .input-time1 [class*="el-"] ~ span {color:var(--g3);font-size:var(--font2);} .input-time1 [class*="el-"] + span {margin:0 0 0 0.7rem;} .input-time1 span + [class*="el-"] {margin:0 0 0 2.0rem;} .input-time2 {position:relative;display:inline-flex;} .input-time2:before {content:attr(data-unit);position:absolute;left:50%;top:0;bottom:0;line-height:var(--com2);transform:translateX(-50%);} .input-time2 [class*="el-"] {width:7.6rem;} .input-time2 [class*="el-"] + [class*="el-"] {margin:0 0 0 2.0rem;} /* 날짜형 : 입력형 */ .input-datetime1 {position:relative;display:flex;} .input-datetime1 div {position:relative;} .input-datetime1 div:nth-child(2) {width:2.4rem;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);text-align:center;} .input-datetime1 div:not([aria-hidden="true"]) {width:calc(50% - 1.2rem);} .input-datetime1 div [class*="el-text"] {width:100%;} .input-datetime1 div ~ div:not([aria-hidden="true"]) {margin:0 0 0 2.4rem;} .input-datetime1 div .ui-datepicker-trigger {overflow:hidden;display:block;position:absolute;right:0.8rem;top:50%;transform:translateY(-50%);width:2.4rem;font-size:0.1rem;line-height:1;white-space:nowrap;} .input-datetime1 div .ui-datepicker-trigger:before {content:'';display:inline-block;width:2.4rem;height:2.4rem;background:var(--img1);background-position:-7.2rem 0;} .input-datetime1 > div:only-child {width:17.2rem;} @media only screen and (min-width:984px){ .input-datetime1 {display:inline-flex;} .input-datetime1 div:not([aria-hidden="true"]) {width:17.2rem;} .input-datetime1 div ~ div:not([aria-hidden="true"]) {margin:0 0 0 4.5rem;} } @media only screen and (max-width:380px){ .input-datetime1 > div:only-child {width:100%;} } .input-data1 {display:flex;gap:0 1.5rem;align-items:center;white-space:nowrap;justify-content:flex-start;} .input-data1 .el-select1:first-child:nth-last-child(2) {width:30.0rem;} .input-data1 + .input-data1 {margin:var(--space3) 0 0;} .input-data1 + .icon-com3 {margin:1.5rem 0 0;} .input-area1 {position:relative;display:inline-block;} .input-area1[data-form="2"] {padding-right:3.7rem;} .input-area1[data-form="2"] [data-btn="add"] {position:absolute;right:0;top:0;margin:calc((var(--com2) - 3.0rem) / 2) 0 0 0;} /* -------------------------------------------------------------------------------- COMPONENT : FORM ELEMENT : 사이즈정의 --------------------------------------------------------------------------------- */ .input-w1 {width:100%;} .input-w2 {width:100%;} .input-w3 {width:100%;} .input-w4 {width:100%;} .input-s1 {width:100%;} @media only screen and (min-width:560px){ .input-w3 {width:29.5rem;} } @media only screen and (min-width:984px){ .input-w1 {width:75%;} .input-w2 {width:50%;} .input-w4 {width:23.0rem;} } @media only screen and (min-width:1441px){ .input-w1 {width:50%;} .input-w2 {width:25%;} } /* -------------------------------------------------------------------------------- COMPONENT : SEARCH AREA --------------------------------------------------------------------------------- */ /* 검색폼1 */ .form-search1 {display:flex;justify-content:center;gap:var(--space3);margin:0 0 1.5rem;} @media only screen and (min-width:769px){ .form-search1 {margin:0 0 3.0rem;} .form-search1 .el-select1 {width:33.0rem;} .form-search1 .el-text1 {width:25.0rem;} } @media only screen and (max-width:768px){ .form-search1 {flex-wrap:wrap;} .form-search1 .el-select1 {width:100%;} .form-search1 .el-text1 {flex:1;} } /* 검색폼2 */ .form-search2 {position:relative;display:flex;flex-wrap:wrap;gap:2.0rem;margin:0 0 var(--space2);padding:2.5rem;border-radius:0.5rem;background:var(--g4);} .form-search2 .label {display:flex;} .form-search2 .label > span {line-height:var(--com2);white-space:nowrap;} .form-search2 .btn-sub1 {font-weight:800;} .form-search2 .btn-sub1:focus, .form-search2 .btn-sub1:hover {box-shadow:inset 0 0 0 0.1rem var(--line2);} .form-search2[data-form="search"] {gap:1.0rem var(--space3);} @media only screen and (min-width:984px){ .form-search2 {padding:2.5rem 5.0rem;} .form-search2 .label ~ .label {margin:0 0 0 3.0rem;} .form-search2 .label > span {margin:0 2.0rem 0 0;font-size:1.8rem;line-height:var(--com2);font-weight:900;} .form-search2 .label {flex:1;} .form-search2 .label > [class*="el-"] {width:100%;} .form-search2[data-form="search"] {justify-content:center;} .form-search2[data-form="search"] > .el-select1 {width:23.0rem;font-weight:800;} .form-search2[data-form="search"] > .el-select1 + .el-text1 {width:35.5rem;} } @media only screen and (min-width:1441px){ .form-search2 {padding:2.5rem 5.0rem;justify-content:center;} .form-search2 .label.w-50 {max-width:42.0rem;} .form-search2 .label {max-width:52.0rem;} } @media only screen and (max-width:1440px){ .form-search2 .label.w-50 {flex:none;width:calc(50% - 2.5rem);} .form-search2 .label.w-50 ~ .label:nth-last-of-type(1) {width:calc(100% - 8.0rem - 1.0rem);} .form-search2 .label.w-50 ~ .label:not(.w-50) {margin:0;} } @media only screen and (max-width:983px){ .form-search2 {gap:2.0rem 1.0rem;} .form-search2 .label {display:block;width:100%;} .form-search2 .label > span {display:block;margin:0 0 1.0rem;font-size:1.4rem;line-height:1.6rem;font-weight:800;} .form-search2 .label > [class*="el-"] {width:100%;} .form-search2 .label:nth-last-of-type(1) {width:calc(100% - 8.7rem);} .form-search2 .label.w-50 {width:calc(50% - 1.0rem);} .form-search2 .label.w-50 ~ .label:nth-last-of-type(1) {width:calc(100% - 8.0rem - 1.0rem);} .form-search2 [data-btn="submit"] {width:8.0rem;min-width:0;position:absolute;right:2.5rem;bottom:2.5rem;} .form-search2[data-form="search"] > .el-text1 {flex:1;} } @media only screen and (max-width:640px){ .form-search2[data-form="search"] > .el-select1 {width:100%;} .form-search2[data-form="search"] > .el-text1 {flex:none;width:calc(100% - 8.7rem);} .form-search2[data-form="search"] .btn-sub1 {width:8.0rem;min-width:0;position:absolute;right:2.5rem;bottom:2.5rem;} } /* 검색폼3 */ .form-search3 {display:flex;justify-content:space-between;align-items:center;margin:0 0 3.0rem;} .form-search2 + .form-search3 {margin-top:-1.0rem;} @media only screen and (max-width:720px){ .form-search3 {flex-direction:column;align-items:start;gap:1.6rem 0;} } /* 검색폼4 */ .form-search4 {display:flex;justify-content:space-between;gap:0 1.0rem;padding:1.0rem;background:#fff;box-shadow:0.2rem 0.2rem 0.3rem rgba(172, 177, 192, 0.5);border-radius:0.7rem;} @media only screen and (min-width:984px){ .form-search4 {gap:0 2.0rem;padding:1.5rem 2.0rem;} .form-search4 .el-select1 {width:21.0rem;font-weight:700;} } @media only screen and (max-width:983px){ .form-search4 .el-select1 {flex:1;min-width:0;} } /* -------------------------------------------------------------------------------- COMPONENT : AGREE AREA --------------------------------------------------------------------------------- */ .form-agree1 .area {position:relative;} .form-agree1 .area.con-policy1 > div {width:100%;overflow-y:scroll;font-size:var(--font2);} .form-agree1 .area.con-policy1 > div::-webkit-scrollbar {width:0.4rem;} .form-agree1 .area.con-policy1 > div::-webkit-scrollbar-track {background-color:var(--g4);border-radius:0.2rem;} .form-agree1 .area.con-policy1 > div::-webkit-scrollbar-thumb {background-color:var(--line3);} .form-agree1 .area .el-check1 {display:flex;} .form-agree1 .area .el-check1 input + span {font-weight:900;} .form-agree1 .area + .area {margin:1.5rem 0 0;padding:2.0rem;border:0.1rem solid #90A0FF;border-radius:0.2rem;} @media only screen and (min-width:984px){ .form-agree1 .area .el-check1 {justify-content:center;} .form-agree1 .area .el-check1 input + span {font-size:2.0rem;} .form-agree1 .area .el-check1 + .btn-sub1 {margin:0 0 0 5.0rem;min-width:10.7rem;} .form-agree1 .area .btn-sub1 {position:absolute;right:1.5rem;;top:50%;transform:translateY(-50%);} .form-agree1 .area.con-policy1 {padding:3.0rem 3.6rem 3.0rem;background:#F6F7FA;} .form-agree1 .area.con-policy1 > div {max-height:38.5rem;margin:0 -3.4rem 0 0;padding:0 3.0rem 0 0;} .form-agree1 .area + .area {padding:1.8rem 2.0rem;} } @media only screen and (max-width:983px){ .form-agree1 .area .el-check1 {margin:-1.0rem 0;} .form-agree1 .area .el-check1 + .btn-sub1 {margin:2.0rem 0 0;} .form-agree1 .area.con-policy1 > div {width:100%;max-height:28.6rem;margin:0 calc(var(--space1) * -1 - 1) 0 0;padding:0 3.0rem 0 0;} } .form-agree2 {margin:var(--space4) 0;display:flex;flex-direction:column;align-items:center;} .form-agree2 [class*="el-check"] label > input ~ span {font-size:1.6rem;font-weight:900;} .form-agree2 > p {font-weight:700;} @media only screen and (min-width:984px){ .form-agree2 [class*="el-check"] label > input ~ span {font-size:2.0rem;} .form-agree2 > p {font-size:1.8rem;font-weight:700;} } @media only screen and (max-width:983px){ .form-agree2 > p {padding:2.0rem 0;text-align:center;} } /* -------------------------------------------------------------------------------- COMPONENT : FORM AREA --------------------------------------------------------------------------------- */ /* 폼영역1 : 기본 */ .form-wrap1 dl.form {display:flex;overflow:hidden;} .form-wrap1 dl.form > dt {width:10.0rem;font-weight:900;line-height:var(--com2);} .form-wrap1 dl.form > dd {flex:1;min-width:0;} .form-wrap1 dl.form ~ dl.form {margin:2.0rem 0 0;} .form-wrap1 dl.form > dd > [class*="el-"]:not([class*="input-w"]):only-child {width:100%;} .form-wrap1 dl.form > dd .txt-guide1 {margin:1.0rem 0 0;} .form-wrap1 dl.form.t2 {flex-wrap:wrap;} .form-wrap1 dl.form.t2 > dd ~ dd {width:100%;flex:none;margin:3.0rem 0 0;} .form-wrap1.line1 {border-top:0.3rem solid var(--line1);border-bottom:0.1rem solid var(--line1);padding:3.0rem 0;} .form-wrap1.line2 dl.form ~ dl.form {margin:1.0rem 0 0;} @media only screen and (min-width:984px){ .form-wrap1 {padding:0 2.0rem;} .form-wrap1 dl.form > dt {width:18%;max-width:25.0rem;} .form-wrap1 dl.form > dt br {display:none;} .form-wrap1 dl.form > dd .txt-guide1 {margin:1.6rem 0 0;} [class*="tit-"] + .form-wrap1 {padding:2.0rem;} .form-wrap1.line1 {padding:4.0rem var(--space1);} .form-wrap1.line2 {padding:3.0rem;border:0.1rem solid var(--line3);border-radius:0.5rem;} .form-wrap1.line2 dl.form > dt {width:8.0rem;} .form-wrap1[data-form="w1"] dl.form > dt {width:24%;} } @media only screen and (max-width:983px){ .form-wrap1 dl.form > dt {line-height:2.0rem;padding:calc((var(--com2) - 2.0rem) / 2) 0;} .form-wrap1 dl.form.t1 {flex-direction:column;} .form-wrap1 dl.form.t1 > dt {width:auto;/*margin:0 0 1.5rem;*/line-height:1.5;} .form-wrap1 dl.form.t2 > dd ~ dd {margin:2.0rem 0 0;} [class*="tit-"] + .form-wrap1 {margin:1.0rem 0 0;padding:1.0rem 0;} .form-wrap1.line1 {padding:3.0rem 0;} .form-wrap1.line2 dl.form > dt {width:6.0rem;} } /* 폼영역2 */ .form-wrap2 {margin:0 auto;} .form-wrap2 .tit-sub2 {text-align:center;} @media only screen and (min-width:1441px){ .area-calendar .ui-datepicker-calendar {max-width:56.0rem;} } @media only screen and (min-width:984px){ .form-wrap2 {max-width:49.0rem;} } /* 폼영역3 */ .form-wrap3 {display:flex;flex-direction:column;} .form-wrap3 [class*="el-"] {width:100%} .form-wrap3 > * + * {margin:-0.1rem 0 0;} .form-wrap3 > *:nth-child(1):not(:only-child), .form-wrap3 > *:nth-child(1):not(:only-child) [class*="el-"] {border-radius:1.0rem 1.0rem 0 0;} .form-wrap3 > *:last-child:not(:only-child), .form-wrap3 > *:last-child:not(:only-child) [class*="el-"] {border-radius:0 0 1.0rem 1.0rem;} .form-wrap3 > *:not(:last-child):not(:nth-child(1)), .form-wrap3 > *:not(:last-child):not(:nth-child(1)) [class*="el-"] {border-radius:0 0 0 0;} .wrap-section2 .area-btn1 {margin:3.0rem 0 0;} .wrap-section2 [class*="txt-bul"].icon-set1 + .area-btn1 {margin:4.5rem 0 0;} /* -------------------------------------------------------------------------------- COMPONENT : BOX --------------------------------------------------------------------------------- */ .box-t1 {background:var(--bg1);padding:var(--space4);border-radius:1.0rem;} @media only screen and (min-width:1441px){ .box-t1 {padding:5.0rem var(--space4);} } /* -------------------------------------------------------------------------------- COMPONENT : INFO : 간략정보 --------------------------------------------------------------------------------- */ /* 간략정보1 */ .info-t1 {font-size:var(--font1);font-weight:900;} .info-t1 span {font-weight:400;} @media only screen and (min-width:984px){ .info-t1 {font-size:2.0rem;} .info-t1:before {content:'';display:inline-block;vertical-align:top;width:3.0rem;height:3.0rem;margin:0 0.8rem 0 0;background:var(--img1);background-position:-3.0rem -4.5rem;} } @media only screen and (max-width:768px){ .info-t1 span {display:block;} } /* 간략정보2 */ .info-t2 {font-size:var(--font1);color:#828692;} .info-t2 strong {color:var(--g1);} /* 간략정보3 */ .info-t3 {text-align:center;font-size:1.6rem;line-height:2.2rem;font-weight:700;} .info-t3 dt {margin:0 0 2.0rem;} .info-t3 dt + dd {font-size:3.0rem;line-height:3.6rem;font-weight:900;} @media only screen and (min-width:984px){ .info-t3 dt {margin:0 0 3.0rem;} .info-t3 + .area-btn1 {margin:5.0rem 0 0;} } @media only screen and (max-width:983px){ .info-t3 {padding:2.0rem 0;} } /* 간략정보3 */ .info-area1 {display:flex;flex-wrap:wrap;gap:1.0rem 2.0rem;justify-content:space-between;align-items:center;margin:0 0 2.0rem;min-height:var(--com2);} .info-area1 [class*="area-btn"] {margin:0;flex:1;} .info-area1 .form {display:flex;gap:1.0rem 2.0rem;flex-wrap:wrap;justify-content:space-between;} .info-area1 .form > div:not([class*="el-check"]) {display:flex;gap:0 var(--space3);flex:1;} .info-area1.txt-bul3 {color:#828692;} @media only screen and (min-width:984px){ .info-area1 {margin:0 0 3.0rem;} .info-area1 .form {display:flex;gap:2.0rem 3.0rem;} } @media only screen and (max-width:983px){ .info-area1 .form > div:not([class*="el-check"]) .el-select1 {flex:1;} } /* -------------------------------------------------------------------------------- COMPONENT : INFO : 간략데이터 --------------------------------------------------------------------------------- */ .data-t1 {display:flex;gap:0 1em;justify-content:center;} .data-t2 {display:flex;flex-wrap:wrap;white-space:nowrap;overflow:hidden;} .data-t2 span {position:relative;padding:0 1.5em;margin:0 0 0 -1.5em;} .data-t2 span:before {content:'';display:block;position:absolute;left:0.7em;top:50%;width:0.1rem;height:0.8em;background:var(--g2);transform:translateY(-50%);} .data-t3 {display:flex;} @media only screen and (min-width:984px){ .data-t3 {gap:2.0rem 5.0rem;} } @media only screen and (max-width:983px){ .data-t3 {flex-direction:column;} } .data-t4 {white-space:nowrap;} .data-t4 strong {color:#FE684B;padding:0 0.2rem 0 0;} /* -------------------------------------------------------------------------------- COMPONENT : INFO : 데이터형 --------------------------------------------------------------------------------- */ /* 유형1 */ .info-data1 {display:inline-flex;gap:var(--space3);font-weight:700;font-size:1.8rem;line-height:2.6rem;} .info-data1 strong {font-weight:700;color:var(--primary-c1);} .info-data1 em {font-weight:400;color:var(--primary-c3);} @media only screen and (min-width:984px){ .info-data1 {font-size:2.0rem;} } .area-bottom .info-data1 {display:flex;justify-content:center;} /* 유형2 */ .info-data2 {font-weight:700;} .info-data2 > dl {padding:2.0rem 0;} .info-data2 > dl > dt, .info-data2 > dl > dd {width:100%;} .info-data2 > dl > dd + dd {margin:0.5rem 0 0;font-size:var(--font1);line-height:1.5;font-weight:400;} .info-data2 .sum strong {color:var(--primary-c3);} .info-data2 .sum {min-width:24%;} @media only screen and (min-width:1441px){ .info-data2 > dl > dd {width:auto;} .info-data2 > dl > dd + dd {margin:0 0 0 2.0rem;} } @media only screen and (min-width:984px){ .info-data2 {display:flex;gap:0 8.0rem;font-size:2.0rem;justify-content:space-between;} .info-data2 > dl {position:relative;display:flex;flex-wrap:wrap;align-content:space-between;align-items:center;white-space:nowrap;} .info-data2 > dl > dt {width:100%;margin:0 0 3.0rem;} .info-data2 > dl + dl:before {content:'';width:0.1rem;position:absolute;left:-4.0rem;top:2.0rem;bottom:2.0rem;background:var(--line3);} .info-data2 .sum > dd {font-size:1.2em;} .info-data2 > dl:nth-of-type(1) {flex:1;} } @media only screen and (max-width:983px){ .info-data2 {font-size:1.6rem;margin:-2.0rem 0;} .info-data2 > dl > dt {margin:0 0 1.6rem;} .info-data2 > dl > dd + dd {margin:1.0rem 0 0;} .info-data2 > dl + dl {border-top:1px solid var(--line2);} .info-data2 .sum > dt {overflow:hidden;position:absolute;left:-0.1rem;top:-0.1rem;width:0.1rem;height:0.1rem;opacity:0;margin:0;} .info-data2 .sum > dd {font-size:1.25em;} } @media only screen and (max-width:768px){ .area-bottom .info-data1 {padding:var(--space3) 0;} } /* 유혇3 */ .info-data3 {position:relative;display:flex;flex-direction:column;align-items:flex-end;margin:0.4rem 0 0;padding:1.6rem var(--space4);border:0.1rem solid var(--line3);background:var(--bg1);} .info-data3:before {content:'';display:block;position:absolute;left:0;right:0;top:5.9rem;height:0.1rem;background:var(--line3);} .info-data3 > dl {width:100%;} .info-data3 > dl > dt, .info-data3 > dl > dd {position:relative;white-space:nowrap;display:flex;justify-content:space-between;z-index:1;} .info-data3 > dl > dt {margin:0 0 3.2rem;font-size:1.6rem;line-height:2.7rem;} .info-data3 > dl > dt span:nth-child(1) {color:var(--primary-c2);font-weight:900;} .info-data3 > dl > dt span:nth-child(2) {color:var(--primary-c3);font-weight:700;} .info-data3 > dl > dd {position:relative;padding:0 0 0 2.6rem;line-height:calc(var(--font1) + 1.0rem);} .info-data3 > dl > dd:before {content:'';position:absolute;left:0;top:50%;width:0.8rem;height:0.6rem;border-left:0.2rem solid var(--line2);border-bottom:0.2rem solid var(--line2);top:50%;margin:-0.3rem 0 0 0.2rem;} .info-data3 > dl > dd span:nth-child(1) {color:var(--g1);} .info-data3 > dl > dd span:nth-child(2) {color:#5E69AF;} .tbl-data1 + .info-data3 {border-top:0.1rem solid var(--line1);margin:-0.1rem 0 0;} @media only screen and (min-width:984px){ .info-data3:before {top:7.4rem;} .info-data3 > dl {max-width:28.0rem;} .info-data3 > dl > dt {font-size:2.0rem;line-height:4.2rem;} .info-data3 > dl > dd {line-height:3.0rem;} } /* -------------------------------------------------------------------------------- COMPONENT : CONTENT --------------------------------------------------------------------------------- */ .info-con2 dl.data {display:flex;gap:0 3.0rem;} .info-con2 dl.data > dt, .info-con2 dl.data > dd {font-size:var(--font1);font-weight:500;padding:1.1rem 0;} .info-con2 dl.data > dt {font-weight:900;} .info-con2 dl.data > dd {flex:1;} .info-con2 dl.data.t1 {flex-direction:column;} .info-con2 dl.data.t1 + dl.data {margin:1.1rem 0 0;} .info-con2.line1 {border-top:0.3rem solid var(--line1);border-bottom:0.1rem solid var(--line1);} .info-con2.line1 + .info-con2.line1 {border-top:0.1rem solid var(--line3);margin-top:-0.1rem;} @media only screen and (min-width:1681px){ } @media only screen and (min-width:984px) and (max-width:1440px){ .info-con2 dl.data > dd .tbl-data2, .info-con2 dl.data > dd .info-data3 {margin-left:calc(var(--space1) * -1);margin-right:calc(var(--space1) * -1);} } @media only screen and (min-width:984px){ .info-con2 {padding:0 var(--space1);} .info-con2 dl.data {gap:0 5.0rem;} .info-con2 dl.data > dt, .info-con2 dl.data > dd {line-height:2.7rem;} .info-con2 dl.data > dt {width:18.0rem;} .info-con2.line1 {padding:2.9rem var(--space1);} .info-con2[data-col="2"] {position:relative;display:flex;flex-wrap:wrap;gap:0 calc(var(--space1) * 2);} .info-con2[data-col="2"]:before {content:'';display:block;position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line3);} .info-con2[data-col="2"] > div {flex:1;} .info-con2[data-col="2"] > div:nth-child(1) {padding-left:0;} .info-con2[data-col="2"] > div:nth-child(2) {padding-right:0;} .info-con2[data-col] > dl.data {width:calc(50% - var(--space1));gap:0 2.0rem;} .info-con2[data-col] > dl.data > dt {width:11.0rem;} } @media only screen and (max-width:983px){ .info-con2 dl.data > dt, .info-con2 dl.data > dd {line-height:2.3rem;} .info-con2 dl.data > dt {width:10.0rem;} .info-con2 dl.data:not(.t1) > dd {max-width:calc(100% - 13.0rem);} .info-con2.line1 {padding:1.5rem 0;} } /* -------------------------------------------------------------------------------- COMPONENT : TABLE --------------------------------------------------------------------------------- */ /* 유형1 */ .tbl-data1 table, .tbl-data1[data-table="group"] {border-top:3px solid var(--line1);} .tbl-data1 th, .tbl-data1 td, .tbl-data1 div.area .heading, .tbl-data1 .area:nth-of-type(1) .heading:before {padding:2.3rem 1.2rem;font-size:var(--font1);line-height:calc(var(--font1) + 1.0rem);text-align:center;vertical-align:middle;} .tbl-data1 th, .tbl-data1 td {border-bottom:1px solid var(--line3);} .tbl-data1 table thead tr:last-of-type th, .tbl-data1 .area:nth-of-type(1) .heading:before {border-bottom:1px solid var(--line1);} .tbl-data1 table tbody th {font-weight:900;} .tbl-data1 table tbody th, .tbl-data1 td.label {font-weight:900;} .tbl-data1 table tbody th {border-right:1px solid var(--line3);} .tbl-data1 td .icon-com3 {margin:-0.6rem 0;} .tbl-data1 td .btn-sub4 {margin:-0.4rem 1.0rem;} .tbl-data1 td .con-t1 {padding:0 1.0rem 0 0;} .tbl-data1 th .list-data5, .tbl-data1 td .list-data5 {margin:-2.3rem -1.2rem;} .tbl-data1 tr th:nth-child(1) .el-check1 span {margin:-1.0rem 0;} .tbl-data1 tr th:nth-child(1) .el-check1 label > input + span, .tbl-data1 tr td:nth-child(1) .el-check1 label > input + span {padding-left:2.3rem;width:0;overflow:hidden;white-space:nowrap;} .tbl-data1[data-table="group"] .area {border-bottom:1px solid var(--line3);} .tbl-data1 .area:nth-of-type(1) .heading:before {font-weight:500;margin:-2.3rem -1.3rem 2.3rem;background:#fff;} .form-wrap1.line1 + .tbl-data1 {margin:var(--space2) 0 0;} @media only screen and (min-width:984px){ .tbl-data1 thead th, .tbl-data1 .area:nth-of-type(1) .heading:before {padding:2.1rem 1.2rem;} .tbl-data1 thead th .liat-data5 {margin:-2.1rem -1.2rem;} } @media only screen and (min-width:1440px){ .tbl-data1 td .con-t1 {padding:0 4.0rem 0 1.0rem;} } @media only screen and (max-width:983px){ .tbl-data1 thead th, .tbl-data1 .area:nth-of-type(1) .heading:before {padding:1.6rem 1.2rem;} } .tbl-data1[data-format] {border-bottom:1px solid var(--line3);} .tbl-data1[data-format]::-webkit-scrollbar {height:0.4rem;} .tbl-data1[data-format]::-webkit-scrollbar-track {background-color:transparent;} .tbl-data1[data-format]::-webkit-scrollbar-thumb {background-color:var(--g4);border-radius:0.2rem;} .tbl-data1[data-table="group"] .area:last-child, .tbl-data1[data-format] tbody tr:last-child th, .tbl-data1[data-format] tbody tr:last-child td {border-bottom:0;} /* 유형1 : 리스트형 */ .tbl-data1[data-format="board"] {border-top:3px solid var(--line1);} .tbl-data1[data-format="board"] > ul > li {border-bottom:0.1rem solid var(--line3);} .tbl-data1[data-format="board"] > ul > li > div[aria-describedby="listTitle"] {font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} @media only screen and (min-width:984px){ .tbl-data1[data-format="board"] .label, .tbl-data1[data-format="board"] > ul > li {display:flex;align-items:center;} .tbl-data1[data-format="board"] .label span, .tbl-data1[data-format="board"] > ul > li > div {padding:0 1.2rem;} .tbl-data1[data-format="board"] .label #listNo, .tbl-data1[data-format="board"] [aria-describedby="listNo"] {width:10%;} .tbl-data1[data-format="board"] .label #listCate, .tbl-data1[data-format="board"] [aria-describedby="listCate"] {width:24%;} .tbl-data1[data-format="board"] .label #listTitle, .tbl-data1[data-format="board"] [aria-describedby="listTitle"] {flex:1;} .tbl-data1[data-format="board"] .label #listDate, .tbl-data1[data-format="board"] [aria-describedby="listDate"] {width:15%;} .tbl-data1[data-format="board"] .label #listCnt, .tbl-data1[data-format="board"] [aria-describedby="listCnt"] {width:10%;} .tbl-data1[data-format="board"] .label {height:6.9rem;border-bottom:0.1rem solid var(--line1);font-size:1.6rem;} .tbl-data1[data-format="board"] .label span {text-align:center;} .tbl-data1[data-format="board"] > ul > li {height:8.0rem;} .tbl-data1[data-format="board"] > ul > li > div {text-align:center;} .tbl-data1[data-format="board"] > ul > li > div[aria-describedby="listTitle"] {text-align:left;} .tbl-data1[data-format="board"] > ul > li:hover > div[aria-describedby="listTitle"], .tbl-data1[data-format="board"] > ul > li:focus > div[aria-describedby="listTitle"] {text-decoration:underline;} } @media only screen and (max-width:983px){ .tbl-data1[data-format="board"] .label {display:none;} .tbl-data1[data-format="board"] > ul > li {position:relative;padding:1.8rem 0 2.0rem 5.5rem;font-size:var(--font1);line-height:2.0rem;} .tbl-data1[data-format="board"] [aria-describedby="listNo"] {position:absolute;left:0;top:1.8rem;width:3.5rem;text-align:center;} .tbl-data1[data-format="board"] [aria-describedby="listCate"] {margin:0 0 0.5rem;} .tbl-data1[data-format="board"] [aria-describedby="listDate"] {margin:1.0rem 0 0;color:#9FA4B4;font-weight:400;} .tbl-data1[data-format="board"] [aria-describedby="listCnt"] {display:none;} } /* 유형2 */ .tbl-data2 table, .tbl-data2 .area {border:1px solid var(--line3);border-radius:0.5rem;} .tbl-data2 table thead + tbody tr:first-of-type th, .tbl-data2 table thead + tbody tr:first-of-type td {border-top:1px solid var(--line3);} .tbl-data2 th, .tbl-data2 td, .tbl-data2 .area:nth-of-type(1) .heading, .tbl-data2 .area .heading:before {padding:1.1rem 1.0rem;height:var(--com2);font-size:var(--font1);text-align:center;vertical-align:top;} .tbl-data2 th, .tbl-data2 td.label, .tbl-data2 .area .heading, .tbl-data2 .area .heading:before {font-weight:900;} .tbl-data2 td ul {text-align:left;} .tbl-data2 thead th, .tbl-data2 .area:nth-of-type(1) .heading:before {background:var(--bg2);} .tbl-data2 thead th {vertical-align:middle;} .tbl-data2 tbody th {border-right:1px solid var(--line3);vertical-align:middle;} .tbl-data2 tbody tr + tr th, .tbl-data2 tbody tr + tr td {border-top:1px solid var(--line3);} .tbl-data2 .area .area, .tbl-data2 .area table {border:0;border-radius:0;} .tbl-data2 .area .heading {display:flex;flex-direction:column;justify-content:center;} .tbl-data2 .area .heading:before {position:absolute;left:0;right:0;top:0;margin:0;} .tbl-data2 .area:nth-of-type(1) .heading {padding-top:var(--com2);} .tbl-data2 .area:nth-of-type(1) .heading:before {border-bottom:1px solid var(--line3);border-radius:0.5rem 0 0;} .tbl-data2 .area:nth-of-type(1) .heading, .tbl-data2 .area:nth-of-type(1) .heading:before {height:auto;} .tbl-data2 .area:nth-child(1):not(:only-child) {border-radius:0.5rem 0.5rem 0 0;} .tbl-data2 .area:last-child:not(:only-child) {border-radius:0 0 0.5rem 0.5rem;} .tbl-data2 .area:not(:last-child):not(:nth-child(1)) {border-radius:0 0 0 0;} .tbl-data2 .area ~ .area .heading {justify-content:center;padding-top:0;} @media only screen and (min-width:984px){ .tbl-data2 th, .tbl-data2 td, .tbl-data2 .area:nth-of-type(1) .heading:before {line-height:2.8rem;padding:1.1rem 1.5rem;} } @media only screen and (max-width:983px){ .tbl-data2 th, .tbl-data2 td, .tbl-data2 .area:nth-of-type(1) .heading, .tbl-data2 .area:nth-of-type(1) .heading:before {line-height:2.3rem;} } .tbl-data2[data-format] {padding:0 0 0.2rem;} .tbl-data2[data-format]::-webkit-scrollbar {height:0.4rem;} .tbl-data2[data-format]::-webkit-scrollbar-track {background-color:transparent;} .tbl-data2[data-format]::-webkit-scrollbar-thumb {background-color:var(--g4);border-radius:0.2rem;} /* 테이블공통 */ [class*="tbl-data"] strong {font-weight:900;} [class*="tbl-data"] strong[role="button"]:hover, [class*="tbl-data"] strong[role="button"]:focus {text-decoration:underline;} [class*="tbl-data"] .con1, [class*="tbl-data"] .tit {text-align:left;} [class*="tbl-data"] .con1 > :nth-child(1) {font-weight:900;} [class*="tbl-data"] .con2:last-child {padding-right:var(--space4);padding-left:0;text-align:right;} [class*="tbl-data"] .con2 > strong {min-width:12.0rem;text-align:right;display:inline-block;vertical-align:top;} [class*="tbl-data"] .tit strong {display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%;vertical-align:top;} [class*="tbl-data"] .area-btn1 {margin:0;} [class*="tbl-data"][data-table="group"] .area {padding:0 0 0 16.0rem;position:relative;} [class*="tbl-data"][data-table="group"] .area:before {content:'';position:absolute;left:16.0rem;top:0;bottom:0;margin:0 0 0 -0.1rem;width:0.1rem;background:var(--line3);box-sizing:border-box;} [class*="tbl-data"][data-table="group"] .area .heading {width:12%;position:absolute;left:0;top:0;bottom:0;width:16.0rem;text-align:center;} [class*="tbl-data"][data-table="group"] .area table {border-top:0;width:100%;} [class*="tbl-data"][data-table="group"] .area table tbody > tr:last-of-type th, [class*="tbl-data"][data-table="group"] .area table tbody > tr:last-of-type td {border-bottom:0;} [class*="tbl-data"][data-table="group"] .area ~ .area {margin:-0.1rem 0 0;border-top:1px solid var(--line3);} [class*="tbl-data"][data-table="group"] .area ~ .area table thead + tbody tr:first-of-type th, [class*="tbl-data"][data-table="group"] .area ~ .area table thead + tbody tr:first-of-type td {border-top:0;} [class*="tbl-data"][data-table="group"] .area ~ .area table thead, [class*="tbl-data"][data-table="group"] .area ~ .area .heading:before {overflow:hidden;position:absolute;left:-0.1rem;top:-0.1rem;width:0.1rem;height:0.1rem;opacity:0;} [class*="tbl-data"][data-table="group"] .area:nth-of-type(1) .heading:before {content:attr(data-label);display:block;} [class*="tbl-data"][data-table="group"] .area .area {width:100%;min-width:100%;} [class*="tbl-data"][data-table="group"] dl.area {display:flex;} [class*="tbl-data"][data-format] {overflow-x:auto;} [class*="tbl-data"][data-format] table {overflow:hidden;min-width:100%;} [class*="tbl-data"][data-format="t1"] table {width:128.0rem;} [class*="tbl-data"][data-format="t2"] table {width:148.0rem;} [class*="tbl-data"][data-format="t3"] table {width:143.0rem;} [class*="tbl-data"][data-format="t1"] .area {min-width:128.0rem;} [class*="tbl-data"][data-format="t2"] .area {min-width:148.0rem;} [class*="tbl-data"][data-format="t3"] .area {min-width:143.0rem;} [class*="tbl-data"][data-format="t1"] th, [class*="tbl-data"][data-format="t1"] td, [class*="tbl-data"][data-format="t3"] td {vertical-align:top;} .info-con2 [class*="tbl-data"][data-format="t1"] th, .info-con2 [class*="tbl-data"][data-format="t1"] td {vertical-align:middle;} [class*="tbl-data"][data-format="list"] table {width:128.0rem;} [class*="tbl-data"][data-format="list2"] table {width:100%;} [class*="tbl-data"][data-format="list3"] table {width:100%;} [class*="tbl-data"][data-format="list3"] table .tit strong {white-space:inherit;text-overflow:inherit;} [class*="tbl-data"][data-format="board"] {overflow:hidden;padding:0;} [class*="tbl-data"][data-format="form1"] table {width:auto;} [class*="tbl-data"][data-format="form1"] thead th div span {display:block;text-align:center;} .tbl-data2[data-format="form1"] td {width:18.8rem;white-space:nowrap;} .tbl-data2[data-format="form1"] th, .tbl-data2[data-format="form1"] td {vertical-align:middle;text-align:center;} .tbl-data2[data-format="form1"] td {padding:3.0rem 2.0rem;} @media only screen and (min-width:1880px){ [class*="tbl-data"][data-format="t1"] table, [class*="tbl-data"][data-format="t1"] .area, [class*="tbl-data"][data-format="t2"] table, [class*="tbl-data"][data-format="t1"] .area, [class*="tbl-data"][data-format="t3"] table, [class*="tbl-data"][data-format="t1"] .area, [class*="tbl-data"][data-format="list"] table {width:100%;} [class*="tbl-data"][data-table="group"] .area {padding:0 0 0 20.0rem;} [class*="tbl-data"][data-table="group"] .area:before {left:20.0rem;} [class*="tbl-data"][data-table="group"] .area .heading {width:20.0rem;} } @media only screen and (max-width:983px){ [class*="tbl-data"][data-format="t1"] table {width:102.4rem;} [class*="tbl-data"][data-format="t2"] table {width:132.4rem;} [class*="tbl-data"][data-format="t3"] table {width:115.0rem;} [class*="tbl-data"][data-format="t1"] .area {min-width:102.4rem;} [class*="tbl-data"][data-format="t2"] .area {min-width:132.4rem;} [class*="tbl-data"][data-format="t3"] .area {min-width:115.0rem;} [class*="tbl-data"][data-format="list"] table {width:102.4rem;} [class*="tbl-data"][data-format="list2"] table {width:86.3rem;} [class*="tbl-data"][data-format="list3"] table {table-layout:unset;} [class*="tbl-data"][data-format="list3"] table colgroup {display:none;} [class*="tbl-data"][data-format="list3"] table thead tr {display:flex;width:100%;} [class*="tbl-data"][data-format="list3"] table thead tr th {width:25%;} [class*="tbl-data"][data-format="list3"] table thead tr th + th {flex:1;} [class*="tbl-data"][data-format="list3"] table tbody tr {display:flex;width:100%;flex-direction:column;padding:2.4rem 0;border-bottom:0.1rem solid var(--line3);} [class*="tbl-data"][data-format="list3"] table tbody td {border:0;text-align:left;height:auto;padding:0;justify-content:flex-start;} [class*="tbl-data"][data-format="list3"] table tbody td + td {margin:0.5rem 0 0;} [class*="tbl-data"][data-format="list3"] table tbody td + td[class*="area-btn"] {margin:2.0rem 0 0;} [class*="tbl-data"][data-table="group"] .area {padding:0 0 0 12.0rem;} [class*="tbl-data"][data-table="group"] .area:before {left:12.0rem;} [class*="tbl-data"][data-table="group"] .area .heading {width:12.0rem;} .tbl-data2[data-format="form1"] td:nth-child(1) {width:15.0rem;} .tbl-data2[data-format="form1"] th {padding:1.6rem 3.0rem;} .tbl-data2[data-format="form1"] td {padding:1.6rem 2.0rem;} .tbl-data2[data-format="form1"] th ~ th {text-align:left;} } /* -------------------------------------------------------------------------------- COMPONENT : LIST --------------------------------------------------------------------------------- */ /* 간략목록1 */ .list-t1 {background:var(--bg2);padding:0.5rem var(--space1);} .list-t1 > ul {overflow:hidden;display:grid;grid-template-columns:1fr;gap:0 2.0rem;justify-content:space-between;} .list-t1 > ul > li {position:relative;display:flex;width:100%;align-items:center;gap:0 var(--space3);line-height:2.0rem;padding:calc((var(--com2) - 1.5rem) / 2) 0;} .list-t1 > ul > li + li {margin:0.2rem 0 0;} .list-t1 > ul > li:after {content:'';display:block;position:absolute;left:0;right:0;bottom:-0.2rem;height:0.2rem;background:#fff;} .list-t1 > ul > li > div {gap:0 var(--space3);} .list-t1 > ul > li > div span:nth-child(1) {font-weight:700;} .list-t1 > ul > li > div span:nth-child(2) {margin:0 0 0 1.0rem;} @media only screen and (min-width:640px){ .list-t1 > ul {grid-template-columns:1fr 1fr;} .list-t1 > ul > li:nth-child(2) {margin:0;} } @media only screen and (min-width:1100px){ .list-t1 > ul {grid-template-columns:1fr 1fr 1fr;} .list-t1 > ul > li:nth-child(3) {margin:0;} } @media only screen and (min-width:1440px){ .list-t1 {padding:0.5rem 4%;} } @media only screen and (min-width:1680px){ .list-t1 > ul {grid-template-columns:30.0rem 30.0rem 30.0rem 30.0rem;} .list-t1 > ul > li:nth-child(4) {margin:0;} } .wrap-section1[data-autoset="toggle"]:not([data-select="none"]).active [data-area="data"] .list-t1 > ul {grid-template-columns:1fr;} .wrap-section1[data-autoset="toggle"]:not([data-select="none"]).active [data-area="data"] .list-t1 > ul > li:nth-child(2) {margin:0;} @media only screen and (min-width:1440px){ .wrap-section1[data-autoset="toggle"]:not([data-select="none"]).active [data-area="data"] .list-t1 {padding:2.5rem 4%;} } @media only screen and (min-width:1600px){ .wrap-section1[data-autoset="toggle"]:not([data-select="none"]).active [data-area="data"] .list-t1 > ul {grid-template-columns:1fr 1fr;} } @media only screen and (min-width:640px) and (max-width:983px){ .wrap-section1[data-autoset="toggle"]:not([data-select="none"]).active [data-area="data"] .list-t1 > ul {grid-template-columns:1fr 1fr;} .wrap-section1[data-autoset="toggle"]:not([data-select="none"]).active [data-area="data"] .list-t1 > ul > ul > li:nth-child(2) {margin:0;} } /* 데이터목록1 */ .list-data1 > ul > li {position:relative;display:flex;padding:1.5rem 0;border-bottom:0.1rem solid var(--line3);justify-content:space-between;align-items:center;} .list-data1 .data1 {display:flex;line-height:2.4rem;} .list-data1 .data1 span:nth-child(2) {padding:0.3rem 0;font-weight:700;line-height:2.0rem;} .list-data1 .data1 span:nth-child(3) {color:var(--g3);} .list-data1 .data2 {display:flex;align-items:center;justify-content:space-between;gap:1.0rem;} .list-data1 .data2 strong {line-height:2.4rem;width:15.0rem;text-align:right;} .list-data1 .data2 .input-wrap2 [class*="el-"] ~ span {color:var(--g3);} .list-data1.form1 > ul > li {padding-left:3.8rem;} .list-data1.form1 .el-check1 label > input + span {padding-left:2.3rem;width:0;overflow:hidden;white-space:nowrap;} .list-data1.form1 .el-check1 {position:absolute;left:0;top:50%;} .list-data1.list1 {margin:2.0rem 0;border-top:0.1rem solid #0C0B15;overflow-y:scroll;} .list-data1.list1::-webkit-scrollbar {width:0.4rem;} .list-data1.list1::-webkit-scrollbar-track {background-color:transparent;border-radius:0.2rem;} .list-data1.list1::-webkit-scrollbar-thumb {background-color:var(--g4);} .list-data1.list1 .data1 {flex-direction:column;} .list-data1.list1 > ul {position:relative;min-height:100%;} .list-data1.list1 > ul > li .side {position:absolute;right:0;top:50%;transform:translateY(-50%);} .list-data1.list1 > ul:empty:before {content:attr(data-none);display:flex;align-items:center;justify-content:center;color:var(--g3);position:absolute;left:0;right:0;top:0;bottom:0;} .list-data1[data-area="scroll"] {max-height:calc(100vh - 40.0rem);overflow-y:scroll;} .list-data1[data-area="scroll"]::-webkit-scrollbar {width:0.4rem;} .list-data1[data-area="scroll"]::-webkit-scrollbar-track {background-color:var(--g4);border-radius:0.2rem;} .list-data1[data-area="scroll"]::-webkit-scrollbar-thumb {background-color:var(--line2);border-radius:0.2rem;} @media only screen and (min-width:984px){ .list-data1 > ul > li {padding:2.0rem 2.0rem;justify-content:space-between;gap:4.0rem;} .list-data1 .data1 {gap:var(--space3);flex-wrap:wrap;} .list-data1 .data1 span:nth-child(3) {width:100%;} .list-data1.form1 .el-check1 {left:1.0rem;transform:translateY(-50%);} .list-data1.form1 > ul > li {padding-left:4.3rem;} .list-data1.list1 {height:34.0rem;} .list-data1.list1 > ul > li {padding-right:8.7rem;} .list-data1.list1 > ul > li .side {right:2.0rem;} .pop-modal2 .section .list-data1[data-area="scroll"] {margin:0 calc(var(--space1) * -1) 0 0;padding:0 var(--space1) 0 0;} } @media only screen and (min-width:1441px){ .list-data1.form1 > ul > li {padding-left:7.3rem;} .list-data1.form1 .el-check1 {left:2.0rem;} } @media only screen and (max-width:983px){ .list-data1 > ul > li {gap:2.0rem;} .list-data1 .data1 {flex-direction:column;} .list-data1 .data2 .input-wrap2 [class*="el-"] {width:6.0rem;} .list-data1 .data2 strong {line-height:2.0rem;} .list-data1.form1 .el-check1 {top:1.5rem;transform:translateY(0%);} .list-data1.list1 {height:27.0rem;} .list-data1.list1 > ul > li {flex-direction:column;align-items:flex-start;gap:0;padding-right:4.8rem;} .pop-modal2 .section .list-data1[data-area="scroll"] {margin:0 calc(var(--space1) * -1);padding:0 var(--space1);} } @media only screen and (max-width:768px){ .list-data1 > ul > li .data2 {width:100%;} .list-data1.form1 > ul > li {flex-direction:column;align-items:flex-start;} } @media only screen and (max-width:420px){ .list-data1 .data2 {flex-direction:column;align-items:start;} .list-data1 .data2 strong {width:100%;;} } /* 데이터목록2 */ .list-data2 > ul > li {position:relative;padding:3.0rem var(--space4);border:1px solid var(--line3);border-radius:0.5rem;} .list-data2 > ul > li + li {margin:1.0rem 0 0;} .list-data2 .num, .list-data2 .tit {font-size:2.0rem;line-height:2.6rem;font-weight:900;} .list-data2 .btn button {width:100%;} .list-data2 .info {display:flex;flex-wrap:wrap;font-size:var(--font1);line-height:1.5;gap:0.5rem;} .list-data2 .info > li {display:flex;gap:1.0rem;} .list-data2 .info > li > div:nth-child(1) {font-weight:900;} .list-data2 .info > li:nth-child(1) {width:100%;color:var(--primary-c3);} @media only screen and (min-width:768px){ .list-data2 > ul > li {display:flex;flex-wrap:wrap;gap:2.0rem;} .list-data2 .tit {flex:1;} .list-data2 .info, .list-data2 .btn {width:100%;} .list-data2 .info {display:flex;gap:1.0rem 5.0rem;} .list-data2 .info > li {gap:2.0rem;} .list-data2 .info > li:nth-child(1) {font-size:1.8rem;line-height:2.6rem;} .list-data2 .btn {margin:1.0rem 0 0;} } @media only screen and (min-width:1281px){ .list-data2 > ul > li {display:flex;align-items:center;gap:2.0rem;} .list-data2 .num {margin:0 0 0 -2.0rem;min-width:4.0rem;text-align:right;} .list-data2 .tit {width:17%;max-width:25.0rem;} .list-data2 .info {flex:1;} .list-data2 .btn {width:17%;margin:0 0 0 var(--space1);} } @media only screen and (min-width:1441px){ .list-data2 .btn {margin:0 0 0 calc(var(--space1) - 1.0rem);} } @media only screen and (max-width:768px){ .list-data2 .num {position:absolute;font-size:1.4rem;top:var(--space4);right:var(--space4);font-weight:400;} .list-data2 .tit {font-size:1.8rem;} .list-data2 .info {gap:0.5rem;flex-direction:column;} .list-data2 .info > li {gap:1.0rem;} .list-data2 .info > li:nth-child(1) {margin:0 0 0.4rem;} .list-data2 .info, .list-data2 .btn {margin:2.0rem 0 0;} } /* 컨텐츠형1 */ .list-con1 {border-top:0.3rem solid #0A081B;margin:3.8rem 0 0;padding:3.8rem 1.0rem;font-size:var(--font1);line-height:2.4rem;} .list-con1 > dl + dl {margin:3.4rem 0 0;} .list-con1 > dl > dt {margin:0 0 2.4rem;font-size:2.0rem;line-height:3.0rem;font-weight:900;} .list-con1 .info-con1 > li > div:nth-child(1) {font-weight:500;min-width:6.5rem;} .info-summary2 ~ .list-con1 {margin:3.0rem 0 0;padding:3.8rem 0;border-bottom:0.1rem solid #0A081B;} .info-summary2 ~ .list-con1 + .area-btn1 {margin:4.0rem 0 0;} @media only screen and (min-width:984px){ .list-con1 {margin:5.0rem 0 0;padding:6.4rem 3.0rem;font-size:1.8rem;line-height:3.0rem;} .list-con1 > dl {display:flex;} .list-con1 > dl + dl {margin:6.4rem 0 0;} .list-con1 > dl > dt {width:15.0rem;font-size:2.3rem;} .list-con1 > dl > dd {margin:0 0 0 3.0rem;flex:1;} .info-summary2 ~ .list-con1 {padding:5.0rem 0;} .info-summary2 ~ .list-con1 + .area-btn1 {margin:5.0rem 0 0;} } @media only screen and (min-width:1281px){ .info-summary2 ~ .list-con1 > dl > dt {width:20.0rem;} } @media only screen and (min-width:1681px){ .list-con1 {margin:7.0rem 0 0;padding:10.0rem 3.0rem;} .list-con1 > dl + dl {margin:10.0rem auto 0;} .list-con1 > dl > dt {width:20.0rem;font-size:2.5rem;} .info-summary2 ~ .list-con1 {margin:5.0rem 0 0;padding:10.0rem 3.0rem;} .info-step2 ~ .list-con1 > dl {max-width:122.0rem;margin:0 auto;} .info-step2 ~ .list-con1 > dl + dl {margin:10.0rem auto 0;} } @media only screen and (min-width:984px) and (max-width:1280px){ .list-con1 > dl.t1 {flex-direction:column;} .list-con1 > dl.t1 > dd {margin:0;} .list-con1 .list-img2 {font-size:1.6rem;} } /* 컨텐츠형2 */ .list-con2 > ul > li {display:flex;flex-direction:column;justify-content:center;} .list-con2 > ul > li + li {margin:5.0rem 0 0;} .list-con2 > ul > li strong {font-size:1.8rem;line-height:2.2rem;font-weight:900;} .list-con2 > ul > li strong + span {margin:1.6rem 0 0;} .list-con2 > ul > li[class*="ic"] {position:relative;padding:0 0 0 13.6rem;min-height:10.6rem;} .list-con2 > ul > li[class*="ic"]:before, .list-con2 > ul > li[class*="ic"]:after {content:'';position:absolute;left:0;top:50%;width:10.6rem;height:10.6rem;transform:translateY(-50%);box-sizing:border-box;} .list-con2 > ul > li[class*="ic"]:before {background:var(--bg2);border-radius:100%;} .list-con2 > ul > li[class*="ic"]:after {background:var(--img1);width:6.9rem;height:6.9rem;margin:0 1.9rem;background-size:41.8rem 41.8rem;} .list-con2 > ul > li.ic1:after {background-position:0 -10.4rem;} .list-con2 > ul > li.ic2:after {background-position:-6.9rem -10.4rem;} @media only screen and (min-width:984px){ .list-con2 > ul > li strong {font-size:2.1rem;line-height:2.5rem;} .list-con2 > ul > li + li {margin:7.0rem 0 0;} .list-con2 > ul > li[class*="ic"] {padding:0 0 0 17.0rem;min-height:12.0rem;} .list-con2 > ul > li[class*="ic"]:before {width:12.0rem;height:12.0rem;} .list-con2 > ul > li[class*="ic"]:after {width:7.8rem;height:7.8rem;margin:0 2.1rem;background-size:48.0rem 48.0rem;} .list-con2 > ul > li.ic1:after {background-position:0 -12.0rem;} .list-con2 > ul > li.ic2:after {background-position:-8.0rem -12.0rem;} } @media only screen and (max-width:983px){ .list-con2 > ul {max-width:34.0rem;margin:0 auto;} } /* 컨텐츠형3 */ .list-con3 {margin:-3.1rem 0 2.4rem;border-top:0.1rem solid #0C0C20;border-bottom:0.1rem solid #0C0C20} .list-con3 > dl {padding:3.0rem 1.0rem;} .list-con3 > dl ~ dl {border-top:0.1rem solid var(--line3);} .list-con3 > dl > dt {margin:0 0 2.0rem;font-weight:900;font-size:var(--font1);line-height:2.0rem;} .list-con3 .info-data1, .list-con3 .info-data1 em {font-weight:900;} @media only screen and (max-width:983px){ .list-con3 {margin:-2.1rem 0 3.0rem;} } /* 이미지형1 */ .list-img1 > ul {display:flex;gap:4.0rem 3.0rem;font-size:var(--font1);line-height:2.4rem;justify-content:space-between;} .list-img1 > ul > li {position:relative;} .list-img1 .tit {display:block;font-size:2.0rem;font-weight:900;} .list-img1 .info {margin:1.2rem 0 0;} .list-img1 .info.info-con1 > li > div:nth-child(1) {font-weight:500;width:3.5em;} .list-img1 .img {position:relative;margin:0 0 3.0rem;width:100%;height:0;padding:60.2% 0 0;border-radius:0.5rem;overflow:hidden;} .list-img1 .img img {position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;} .list-img1 .btn {position:absolute;right:0;bottom:0;} @media only screen and (min-width:721px){ .list-img1 > ul {flex-wrap:wrap;gap:4.0rem 3.0rem;} .list-img1 > ul > li {width:calc(50% - 1.5rem);} } @media only screen and (min-width:984px){ .list-img1 > ul {gap:7.0rem 3.0rem;line-height:2.6rem;} .list-img1 .tit {font-size:2.5rem;line-height:3.0rem;} .list-img1 .img {margin:0 0 5.0rem;} .list-img1 .info {margin:1.6rem 0 0;} .list-img1 .info.info-con1 > li {gap:0 2.0rem;} .list-img1 .btn.btn-com1 {min-width:12.0rem;} } @media only screen and (min-width:1441px){ .list-img1 > ul {gap:7.0rem;} .list-img1 > ul > li {width:calc(50% - 3.5rem);} .list-img1 .tit {font-size:3.3rem;line-height:3.9rem;} .list-img1 .info {margin:2.6rem 0 0;} } @media only screen and (min-width:1681px){ .list-img1 > ul {max-width:138.0rem;margin:0 auto;padding:3.0rem 0;gap:15.0rem;font-size:1.8rem;line-height:3.0rem;} .list-img1 > ul > li {width:calc(50% - 7.5rem);max-width:61.5rem;} .list-img1 .info {margin:2.4rem 0 0;} .list-img1 .img {margin:0 0 7.0rem;max-width:61.5rem;} .list-img1 .btn.btn-com1 {min-width:22.6rem;} } @media only screen and (max-width:983px){ .list-img1 > ul {padding:0 1.0rem;} .list-img1 .info.info-con1 > li {gap:0 1.0rem;} .list-img1 .btn.btn-com1 {min-width:9.0rem;} } @media only screen and (max-width:720px){ .list-img1 > ul {flex-direction:column;} } /* 이미지컨텐츠 */ .list-img2 > ul > li + li {margin:4.0rem 0 0;} .list-img2 .img {overflow:hidden;position:relative;margin:0 0 3.6rem;} .list-img2 .img:before {content:'';display:block;width:100%;height:0;padding:60.2% 0 0;} .list-img2 .img .img-area1 {position:absolute;left:0;right:0;top:0;bottom:0;} .list-img2 .tit {display:block;margin:0 0 1.6rem;font-size:2.0rem;line-height:2.6rem;font-weight:900;} @media only screen and (min-width:721px){ .list-img2 > ul > li {display:flex;align-items:flex-start;} .list-img2 > ul > li + li {margin:5.0rem 0 0;} .list-img2 .img {flex:1;margin:0;max-width:52.0rem;} .list-img2 .con {margin:0 0 0 4.0rem;width:calc(57% - 4.0rem);padding:1.0rem 0;} .list-img2 .tit {font-size:2.5rem;line-height:3.1rem;} } @media only screen and (min-width:984px){ .list-img2 > ul > li + li {margin:5.0rem 0 0;} .list-img2 .con {margin:0 0 0 7.0rem;width:calc(57% - 7.0rem);} } @media only screen and (min-width:1441px){ .list-img2 > ul > li + li {margin:7.0rem 0 0;} .list-img2 .con {margin:0 0 0 10.0rem;width:calc(57% - 10.0rem);} .list-img2 .tit {font-size:3.0rem;line-height:3.6rem;margin:0 0 3.6rem;} .list-img2 .info.info-con1 > li + li {margin:1.2rem 0 0;} } .img-area1 {width:100%;border-radius:1.0rem;overflow:hidden;} .img-area1 > ul {display:flex;transition-property:transform;height:100%;} .img-area1 > ul > li {width:100%;height:100%;flex-shrink:0;backface-visibility:hidden;} .img-area1 > ul > li img {width:100%;height:100%;} .img-area1 .pagenation button {position:absolute;top:50%;width:3.5rem;height:3.5rem;transform:translateY(-50%);background:#fff;box-shadow:0 0 0.3rem rgba(0, 0, 0, 0.25);opacity:0.5;border-radius:100%;transition:all 0.3s ease-in-out;} .img-area1 .pagenation button:before {content:'';display:block;width:1.5rem;height:1.5rem;margin:1.0rem;background:var(--img1);background-size:36.0rem 36.0rem;background-position:-5.9rem -1.8rem;} .img-area1 .pagenation button, .img-area1 .pagenation button::selection {color:transparent;} .img-area1 .pagenation button:hover, .img-area1 .pagenation button:focus {opacity:1;} .img-area1 .pagenation button[aria-disabled="true"] {opacity:0;} .img-area1 .pagenation .btn-prev {left:1.4rem;transform:translateY(-50%) rotate(-180deg);} .img-area1 .pagenation .btn-next {right:1.4rem;} @media only screen and (min-width:1441px){ .img-area1 .pagenation button {width:5.0rem;height:5.0rem;} .img-area1 .pagenation button:before {width:2.0rem;height:2.0rem;margin:1.5rem;background-size:48.0rem 48.0rem;background-position:-8.0rem -2.4rem;} .img-area1 .pagenation .btn-prev {left:2.0rem;} .img-area1 .pagenation .btn-next {right:2.0rem;} } /* -------------------------------------------------------------------------------- COMPONENT : 영역분할 / 영역위치 --------------------------------------------------------------------------------- */ .wrap-section1 {background:#fff;border-radius:1.0rem;padding:2.0rem var(--space1);overflow:hidden;box-shadow:0.2rem 0.2rem 0.3rem rgba(172, 177, 192, 0.5);} .wrap-section1 .area-bottom, .wrap-section1 .area-action {margin:2.0rem calc(var(--space1) * -1) -2.0rem;} .wrap-section1 .area-bottom {background:#f6f7fa;padding:2.0rem var(--space1);} .wrap-section1 .area-action {display:flex;} .wrap-section1 .area-action [class*="btn-action"] {flex:1;max-width:100%;} .wrap-section1 + .wrap-section1 {margin-top:0.7rem;} .wrap-section1 .section {position:relative;} .wrap-section1 .section ~ .section {margin:5.0rem 0 0;} .wrap-section1 .section ~ .section:before {content:'';display:block;position:absolute;left:2.0rem;right:2.0rem;top:-2.1rem;border-top:1px solid var(--line2);} .wrap-section1 .nodata {padding:3.0rem 0;font-size:1.6rem;color:var(--g3);text-align:center;} .wrap-section1[data-section="content"], section.wrap-section1:not([data-autoset="toggle"]) {padding:3.0rem var(--space1);} section.wrap-section1 + section.wrap-section1 {margin-top:1.0rem;} .wrap-section1.form-agree1 {padding:calc(1.0rem + var(--space1)) var(--space1);} @media only screen and (min-width:984px){ .wrap-section1 .section ~ .section {margin:8.0rem 0 0;} .wrap-section1 .section ~ .section:before {top:-4.0rem;} .wrap-section1 .nodata {font-size:1.8rem;} .wrap-section1.t1 .area:not(.area-toggle2) {max-width:122.0rem;margin:0 auto;padding:0 4.0rem;} .wrap-section1.t1 .area:not(.area-toggle2) .nodata {line-height:20.0rem;} .wrap-section1.t1 .area:not(.area-toggle2) .list-data1.form1 > ul {min-height:40.4rem;} .wrap-section1[data-section="content"], section.wrap-section1:not([data-autoset="toggle"]) {padding:var(--space4);} .wrap-section1.form-agree1 {padding:3.0rem;} } @media only screen and (min-width:1681px){ .wrap-section1[data-section="content"], section.wrap-section1:not([data-autoset="toggle"]) {padding:calc(var(--space4) - 2.0rem) var(--space4);} .wrap-section1[data-section="content"]:only-of-type, section.wrap-section1:not([data-autoset="toggle"]):only-of-type {padding:calc(var(--space4) - 2.0rem) var(--space4) var(--space4);} .wrap-section1.form-agree1 {padding:5.0rem var(--space4);} } /* 컨트롤버튼 */ .wrap-section1 .aside {position:absolute;z-index:1;} .wrap-section1 [data-area="head"] .aside {right:0;top:0;} .wrap-section1 [data-area="form"] .aside {right:0;bottom:100%;margin:0 -0.1rem 0 0;} .wrap-section1 [data-area="form"] .aside .icon-com1 {border-bottom:0;} .wrap-section1 [data-area="data"] .aside {left:0;top:0;} /* 상태 : 닫힌상태 */ .wrap-section1[data-autoset="toggle"]:not(.active) [data-area="form"] {display:none;} /* 상태 : 닫힌상태 + 선택값없음 */ .wrap-section1[data-autoset="toggle"][data-select="none"]:not(.active) [data-area="data"] {display:none;} .wrap-section1[data-autoset="toggle"][data-select="none"]:not(.active) [data-area="head"] .cnt2 {display:none;} /* 상태 : 닫힌상태 + 선택값있음 .wrap-section1[data-autoset="toggle"]:not([data-select="none"]):not(.active) {} */ /* 상태 : 열린상태 */ .wrap-section1[data-autoset="toggle"].active {padding:3.0rem var(--space1);} .wrap-section1[data-autoset="toggle"].active [data-area="head"] .aside {display:none;} .wrap-section1[data-autoset="toggle"].active .area-toggle1 {margin:0;} /* 상태 : 열린상태 + 선택값없음 */ .wrap-section1[data-autoset="toggle"][data-select="none"].active [data-area="head"] .cnt2 {display:none;} .wrap-section1[data-autoset="toggle"][data-select="none"].active [data-area="data"] {visibility:hidden;} .wrap-section1[data-autoset="toggle"][data-select="none"].active [data-area="data"]:after {content:'';display:flex;align-items:center;justify-content:center;visibility:visible;position:absolute;left:0;right:0;top:0;bottom:0;background:var(--g5);border:1px dashed var(--line2);border-radius:0.3rem;color:var(--g3)} .wrap-section1[data-autoset="toggle"][data-select="none"].active [data-area="data"] .aside {display:none;} /* 상세영역 */ .area-toggle1, .area-toggle1 .con {position:relative;} .area-toggle1 [data-area="form"] {padding:3.0rem var(--space1);border:1px solid var(--line3);border-radius:0.3rem 0 0.3rem 0.3rem;} .area-toggle1 [data-area="form"] .form-wrap1 {padding:0;} .area-toggle1 [data-area="form"] .form-wrap1 dl.form > dt {width:10.0rem;} /* 상세영역2 */ .area-toggle2 {margin:3.0rem calc(var(--space1) * -1) -2.0rem;} .area-toggle2 .con[data-area="default"] {position:relative;padding:2.0rem 0;border-radius:3.0rem 3.0rem 0px 0px;box-shadow:0.1rem 0.1rem 1.0rem rgba(172,177,192,0.5);text-align:center;} /* .area-toggle2 .con[data-area="default"] [aria-haspopup] {position:static;} .area-toggle2 .con[data-area="default"] [aria-haspopup]:before {content:'';position:absolute;left:0;right:0;top:0;bottom:0;background:transparent;} */ @media only screen and (min-width:769px){ .wrap-section1 {box-shadow:0.2rem 0.2rem 0.3rem #ACB1C080;} .wrap-section1 .area-bottom, .wrap-section1 .area-action {margin:3.0rem calc(var(--space1) * -1) -3.0rem;} .wrap-section1 .area-bottom {padding:3.0rem var(--space1) 3.4rem;} .wrap-section1.t2 .section {padding:0 3.0rem;} .wrap-section1.t2 .section ~ .section:before {left:5.0rem;right:5.0rem;} .area-toggle2 {margin:3.0rem calc(var(--space1) * -1) -3.0rem;} } @media only screen and (min-width:984px){ .area-toggle1 {display:flex;} .area-toggle1 [data-area="form"] {width:calc(56% - 2.0rem);padding:5.0rem var(--space1);} .area-toggle1 [data-area="form"] .form-wrap1 {margin:0 auto;} .area-toggle1 [data-area="data"] {width:44%;padding:2.0rem 0 0;margin:0 0 0 2.0rem;} .area-toggle1 [data-area="data"] .aside {transform:translateY(-100%);} .wrap-section1 .aside .btn-sub1 {min-width:10.7rem;} /* 상태 : 열린상태 */ .wrap-section1[data-autoset="toggle"].active {padding:5.0rem var(--space1);} .wrap-section1[data-autoset="toggle"].active [data-area="head"] {transform:translateY(-2.0rem);} /* 상태 : 닫힌상태 + 선택값있음 */ .wrap-section1[data-autoset="toggle"]:not([data-select="none"]):not(.active) {padding:5.0rem var(--space1);} .wrap-section1[data-autoset="toggle"]:not([data-select="none"]):not(.active) [data-area="data"] {width:100%;margin:0;} .wrap-section1[data-autoset="toggle"]:not([data-select="none"]):not(.active) [data-area="data"] .aside {left:unset;right:11.7rem;} .wrap-section1[data-autoset="toggle"].form-agree1:not(.active) {padding:2.0rem var(--space1);} .wrap-section1[data-autoset="toggle"].form-agree1.active {padding:2.0rem var(--space1) 5.0rem;} .wrap-section1.t2 {padding:5.0rem var(--space1) 3.0rem;} } @media only screen and (min-width:1441px){ .area-toggle1 [data-area="form"] {padding:5.0rem 4%;} .wrap-section1.t2 .section {padding:0;} .wrap-section1.t2 .section ~ .section:before {left:2.0rem;right:2.0rem;} } @media only screen and (min-width:1600px){ .area-toggle1 [data-area="form"] {width:calc(52% - 2.0rem);} .area-toggle1 [data-area="data"] {width:48%;} } @media only screen and (max-width:1063px){ .wrap-section1 .area-bottom.txt-bul2 > ul {margin:0 0 0 -0.7em;} } @media only screen and (max-width:983px){ .area-toggle1 .con + .con {margin:3.0rem 0 0;padding:calc(var(--com2) + 1.0rem) 0 0;} .wrap-section1[data-autoset="toggle"]:not(.active) .con + .con {margin:0.5rem 0 0;padding:calc(var(--com2) + 1.5rem) 0 0;} .wrap-section1[data-autoset="toggle"]:not(.active):not([data-select="none"]) [data-area="head"] .aside {left:12.5rem;right:unset;top:calc(var(--com2) + 0.5rem);} .wrap-section1[data-autoset="toggle"].active [data-area="head"] {transform:translateY(-1.0rem);} .wrap-section1[data-autoset="toggle"].form-agree1:not(.active), .wrap-section1[data-autoset="toggle"].form-agree1.active {padding:1.0rem var(--space1) 2.0rem;} .wrap-section1.t2 .section ~ .section:before {left:2.0rem;right:2.0rem;} } @media only screen and (max-width:768px){ .wrap-section1 {margin:0 -1.0rem;} .wrap-section1.t2 .section ~ .section:before {left:0;right:0;} } /* -------------------------------------------------------------------------------- COMPONENT : DATEPICKER : 기본 : 레이어형 --------------------------------------------------------------------------------- */ .ui-datepicker:not(.ui-datepicker-inline) {display:none;padding:4.4rem 3.6rem;} .ui-datepicker:not(.ui-datepicker-inline):before {content:'';display:block;background:#fff;position:absolute;left:0;right:0;top:0;bottom:0;margin:0.4rem 0;border:1px solid var(--line2);box-shadow:0.3rem 0.3rem 0.6rem #00000029;z-index:-1;} .ui-datepicker-header {position:relative;margin:0 0 1.0rem;line-height:3.0rem;color:var(--g1);text-align:center;} .ui-datepicker-header .ui-datepicker-title {width:100%;font-size:2.0rem;font-weight:700;} .ui-datepicker-header a {position:absolute;top:0.1rem;width:3.0rem;height:3.0rem;cursor:pointer;} .ui-datepicker-header a span {display:block;position:relative;font-size:1px;overflow:hidden;pointer-events:none;white-space:nowrap;} .ui-datepicker-header a:after {content:'';display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:2.0rem;height:2.0rem;background:var(--img1);background-position:-4.0rem -2.4rem;} .ui-datepicker-header a span, .ui-datepicker-header a span::selection {color:transparent;} .ui-datepicker-header a.ui-datepicker-prev {right:calc(50% + 6.0rem);} .ui-datepicker-header a.ui-datepicker-next {left:calc(50% + 6.0rem);} .ui-datepicker-header a.ui-datepicker-prev:after {transform:rotate(90deg);} .ui-datepicker-header a.ui-datepicker-next:after {transform:rotate(-90deg);} .ui-datepicker-calendar {width:28.7rem;border-collapse:separate;margin:0 auto;} .ui-datepicker-calendar th, .ui-datepicker-calendar td {text-align:center;vertical-align:top;} .ui-datepicker-calendar td {font-size:1.2rem;line-height:3.5rem;} .ui-datepicker-calendar th {font-size:1.2rem;line-height:3.0rem;padding-bottom:0.8rem;} .ui-datepicker-calendar td {width:4.0rem;height:4.0rem;padding:0.4rem;} .ui-datepicker-calendar .ui-state-default {position:relative;display:block;width:100%;height:100%;margin:0 auto;background:#dce1ff;border-radius:100%;width:3.4rem;line-height:3.4rem;font-weight:700;color:var(--g1);font-variant-numeric:normal;} .ui-datepicker-calendar .ui-state-disabled .ui-state-default {background:#F5F5F8;} .ui-datepicker-calendar .ui-state-active {color:#fff;background:var(--g1);} .ui-datepicker-calendar .ui-datepicker-today a.ui-state-active:before {background:#fff;} .ui-datepicker-calendar .ui-state-selected {position:relative;} .ui-datepicker-calendar .ui-state-selected:before {content:'';position:absolute;left:0;right:0;top:0;bottom:0;border:0.2rem dotted var(--g1);border-radius:0.8rem;} /* .ui-datepicker-calendar .ui-state-selected .ui-state-default {position:relative;} .ui-datepicker-calendar .ui-state-selected .ui-state-default:after {content:'';position:absolute;display:block;left:0;right:0;top:0;bottom:0;border-radius:100%;background:rgba(255,255,255,0.9) url(../../images/com/img_form2.svg) no-repeat 50% 50%;background-size:1.6rem 1.6rem;border:0.2rem solid var(--g1)} */ @media only screen and (max-width:768px){ .ui-datepicker:not(.ui-datepicker-inline) {left:50% !important;transform:translateX(-50%);padding:4.4rem 4.0rem;} .ui-datepicker:not(.ui-datepicker-inline):before {margin:0.4rem 0;} .ui-datepicker-calendar .ui-state-selected .ui-state-default:after {background-size:1.2rem 1.2rem;} } @media only screen and (max-width:410px){ .ui-datepicker:not(.ui-datepicker-inline) {padding:3.4rem 3.0rem;} } /* -------------------------------------------------------------------------------- COMPONENT : DATEPICKER : 페이지내노출 --------------------------------------------------------------------------------- */ .area-calendar {margin:0 0 3.0rem;} .area-calendar .ui-datepicker-calendar {width:100%;border-spacing:0.2rem;} .area-calendar .ui-datepicker-calendar th {font-size:1.3rem;} .area-calendar ~ .el-btn1 {margin:3.0rem 0 0;} .area-calendar .headline {position:relative;text-align:center;font-weight:700;} .area-calendar .headline p {display:inline-block;} .area-calendar .headline .btn button {overflow:hidden;position:absolute;top:50%;font-size:1px;overflow:hidden;white-space:nowrap;color:transparent;transform:translateY(-50%)} .area-calendar .headline .btn button:after {content:'';display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:2.0rem;height:2.0rem;background:var(--img1);background-position:-4.0rem -2.4rem;} .area-calendar .headline .btn button.btn-prev:after {transform:rotate(90deg);} .area-calendar .headline .btn button.btn-next:after {transform:rotate(-90deg);} .area-calendar .tbl-calendar {border-collapse:separate;margin:0 auto;border-spacing:0.7rem;} .area-calendar .tbl-calendar th, .area-calendar .tbl-calendar td {text-align:center;vertical-align:top;} .area-calendar .tbl-calendar td {font-weight:700;} .area-calendar .tbl-calendar td > span:nth-child(1) {display:block;color:var(--g1);font-weight:700;font-variant-numeric:normal;} .area-calendar .tbl-calendar td > span:nth-child(1)[role="button"], .area-calendar .tbl-calendar td > span:nth-child(1)[data-disabled] {color:var(--g1);background:#DCE1FF;border-radius:100%;} .area-calendar .tbl-calendar td > span:nth-child(1)[data-disabled="true"] {background:#F5F5F8;} .area-calendar .tbl-calendar td > span:nth-child(1)[aria-selected="true"] {background:var(--g1);color:#fff;} .area-calendar .label {display:flex;justify-content:center;margin:4.0rem 0 0;font-size:1.4rem;line-height:1.5rem;font-weight:700;} .area-calendar .label dt {overflow:hidden;position:absolute;left:-0.1rem;top:-0.1rem;width:0.1rem;height:0.1rem;opacity:0;} .area-calendar .label dd {display:inline-flex;gap:0.5rem;} .area-calendar .label dd + dd {margin:0 0 0 2.0rem;} .area-calendar .label dd:before {content:'';width:1.5rem;height:1.5rem;box-sizing:border-box;border-radius:100%;} .area-calendar .label dd.lb1:before {background:#F5F5F8;} .area-calendar .label dd.lb2:before {background:#C9D1FF;} .area-calendar .label dd.lb3:before {background:#0A081B;} @media only screen and (min-width:984px){ .area-calendar {margin:5.0rem -1.0rem;} .area-calendar ~ .el-btn1 {margin:5.0rem 0 0;} .area-calendar .ui-datepicker-header {margin:0 0 2.0rem;font-size:2.6rem;} .area-calendar .ui-datepicker-calendar {max-width:49.0rem;} .area-calendar .ui-datepicker-calendar th {font-size:1.5rem;padding-bottom:1.2rem;} .area-calendar .ui-datepicker-calendar td {width:5.8rem;height:5.8rem;padding:0.4rem;} .area-calendar .ui-datepicker-calendar td .ui-state-default {width:5.0rem;font-size:1.6rem;line-height:5.0rem;} .area-calendar .headline {margin:0 0 1.6rem;font-size:2.6rem;line-height:3.0rem;} .area-calendar .headline .btn button {width:3.0rem;height:3.0rem;} .area-calendar .headline .btn button.btn-prev {right:calc(50% + 8.0rem);} .area-calendar .headline .btn button.btn-next {left:calc(50% + 8.0rem);} .area-calendar .tbl-calendar {width:49.0rem;} .area-calendar .tbl-calendar th, .area-calendar .tbl-calendar td {font-size:1.6rem;line-height:5.0rem;} .area-calendar .tbl-calendar th {font-size:1.2rem;font-weight:500;} .pop-modal1 .area-calendar .tbl-calendar {width:100%;max-width:40.6rem;} } @media only screen and (max-width:983px){ .area-calendar .ui-datepicker-calendar {width:auto;} .area-calendar .headline {padding:1.6rem 0;font-size:2.0rem;line-height:2.4rem;} .area-calendar .headline .btn button {width:2.4rem;height:2.4rem;} .area-calendar .headline .btn button.btn-prev {right:calc(50% + 5.0rem);} .area-calendar .headline .btn button.btn-next {left:calc(50% + 5.0rem);} .area-calendar .tbl-calendar {max-width:30.1rem;} .area-calendar .tbl-calendar th, .area-calendar .tbl-calendar td {font-size:1.2rem;line-height:3.5rem;} .area-calendar .tbl-calendar th {font-size:1.1rem;font-weight:700;} .area-calendar .label {margin:2.6rem 0 0;} } @media only screen and (max-width:380px){ .area-calendar {margin:0 -1.0rem 3.0rem;} } /* -------------------------------------------------------------------------------- COMPONENT : 달력 : 페이지내노출 : 섹션형 : 삭제예정 --------------------------------------------------------------------------------- */ .area-calendar2 .ui-datepicker-calendar {width:100%;border-top:0.3rem solid var(--g1);} .area-calendar2 .ui-datepicker-calendar td {width:auto;padding:1.1rem 0;border-bottom:0.1rem solid var(--line2);} .area-calendar2 .ui-datepicker-calendar th + th, .area-calendar2 .ui-datepicker-calendar td + td {border-left:0.1rem solid var(--line2);} .area-calendar2 .ui-datepicker-calendar th {font-size:1.2rem;line-height:1.8rem;padding:1.4rem 0 0;} .area-calendar2 .ui-datepicker-calendar .ui-state-default {display:block;width:3.6rem;height:3.6rem;font-size:1.2rem;line-height:3.6rem;background:var(--g1);color:#fff;} .area-calendar2 .ui-datepicker-calendar .ui-state-disabled .ui-state-default {background:none;color:var(--g3);} .area-calendar2 .ui-datepicker-calendar .ui-state-active {background:var(--primary-c1);} .area-calendar2 .ui-datepicker-calendar .ui-state-end {pointer-events:none;} .area-calendar2 .ui-datepicker-calendar .ui-state-end .ui-state-default {background:#ECEFFF;color:var(--g3);pointer-events:none;} .area-calendar2 .ui-datepicker-header .ui-datepicker-title select {border:0;font-weight:700;} .area-calendar2 .ui-datepicker-header a {box-shadow:inset 0 0 0 0.1rem var(--line2);} .area-calendar2 .ui-datepicker-header a.ui-datepicker-prev {right:unset;left:0;} .area-calendar2 .ui-datepicker-header a.ui-datepicker-next {left:unset;right:0;} .area-calendar2 .ui-datepicker-header .ui-datepicker-title select {padding:0 2.0rem 0 0;background:url(../../images/com/img_form1.png) no-repeat 100% 50%;background-size:1.0rem 0.6rem;} .area-calendar2 .ui-datepicker-header .ui-datepicker-title select + select {margin:0 0 0 1.5rem;} @media only screen and (min-width:984px){ .area-calendar2 .ui-datepicker-calendar th {font-size:1.6rem;line-height:2.2rem;padding:1.6rem 0 0;} .area-calendar2 .ui-datepicker-calendar td {padding:3.0rem 0;} .area-calendar2 .ui-datepicker-calendar .ui-state-default {width:4.0rem;height:4.0rem;font-size:1.6rem;line-height:4.0rem;} .area-calendar2 .ui-datepicker-header {display:inline-block;margin:0 0 3.3rem;padding:0 8.0rem;text-align:left;} .area-calendar2 .ui-datepicker-header a {width:var(--com2);height:var(--com2);line-height:var(--com2);box-shadow:inset 0 0 0 0.1rem var(--line2);} .area-calendar2 .ui-datepicker-header .ui-datepicker-title select {font-size:3.0rem;line-height:var(--com2);} .area-calendar2[data-cate="type2"] .ui-datepicker-calendar td:not(.ui-state-disabled):after {content:attr(title);display:block;font-size:1.6rem;line-height:2.0rem;margin:1.9rem 0 -0.4rem;font-weight:700;} .area-calendar2[data-cate="type2"] .ui-datepicker-calendar td:not(.ui-state-disabled).ui-state-end:after {color:var(--g3);font-weight:400;} } @media only screen and (max-width:983px){ .area-calendar2 .ui-datepicker-header {margin:0 0 14.0rem;} .area-calendar2 .ui-datepicker-header a {width:3.4rem;height:3.4rem;line-height:3.4rem;} .area-calendar2 .ui-datepicker-header .ui-datepicker-title select {font-size:2.0rem;line-height:3.4rem;} } /* -------------------------------------------------------------------------------- COMPONENT : 달력 : 마크업형 --------------------------------------------------------------------------------- */ .area-calendar2 .tbl-calendar1 {width:100%;border-top:0.3rem solid var(--g1);} .area-calendar2 .tbl-calendar1 th, .area-calendar2 .tbl-calendar1 td {position:relative;text-align:center;vertical-align:top;} .area-calendar2 .tbl-calendar1 td {padding:1.1rem 0;border-bottom:0.1rem solid var(--line3);} .area-calendar2 .tbl-calendar1 th + th, .area-calendar2 .tbl-calendar1 td + td {border-left:0.1rem solid var(--line3);} .area-calendar2 .tbl-calendar1 th {font-size:1.2rem;line-height:1.8rem;padding:1.4rem 0 0;z-index:1;} .area-calendar2 .tbl-calendar1 td > span:nth-child(1) {position:relative;display:block;width:3.6rem;height:3.6rem;margin:0 auto;font-size:1.2rem;line-height:3.6rem;color:var(--g1);font-weight:700;font-variant-numeric:normal;z-index:1;} .area-calendar2 .tbl-calendar1 td > span:nth-child(1)[role="button"], .area-calendar2 .tbl-calendar1 td > span:nth-child(1)[data-disabled] {color:var(--g1);background:#DCE1FF;border-radius:100%;} .area-calendar2 .tbl-calendar1 td > span:nth-child(1)[data-close="true"] {background:none;color:#9FA4B4;} .area-calendar2 .tbl-calendar1 td > span:nth-child(1)[data-disabled="true"] {background:#F5F5F8;} .area-calendar2 .tbl-calendar1 td > span:nth-child(1)[aria-selected="true"] {background:var(--g1);color:#fff;} .area-calendar2 .tbl-calendar1 td .close {position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;padding:4.0rem 0 0;background:#F6F7FA;color:#9FA4B4;font-weight:500;} .area-calendar2 .tbl-calendar1 tr:first-of-type td .close {top:-3.8rem;padding:7.8rem 0 0;} .area-calendar2 .tit-form1 {position:relative;} .area-calendar2 .tit-form1 select {border:0;padding:0 3.0rem 0 1.0rem;font-weight:700;background:url(../../images/com/img_form1.png) no-repeat calc(100% - 1.0rem) 50%;background-size:1.0rem 0.6rem;} .area-calendar2 .tit-form1 select + select {margin:0 0 0 0.5rem;} .area-calendar2 .tit-form1 [data-btn] {position:absolute;top:0;} .area-calendar2 .tit-form1 [data-btn="prev"] {left:0;} .area-calendar2 .tit-form1 [data-btn="next"] {right:0;} @media only screen and (min-width:984px){ .area-calendar2 .tbl-calendar1 th {font-size:1.6rem;line-height:2.2rem;padding:1.6rem 0 0;} .area-calendar2 .tbl-calendar1 td {padding:2.0rem 0;height:13.6rem;} .area-calendar2 .tbl-calendar1 td > span:nth-child(1) {width:4.0rem;height:4.0rem;font-size:1.6rem;line-height:4.0rem;} .area-calendar2 .tit-form1 {display:inline-block;margin:0 0 3.3rem;padding:0 5.0rem;vertical-align:top;} .area-calendar2 .tit-form1 select {font-size:3.0rem;line-height:var(--com2);} .area-calendar2 .tit-form1 select option {font-size:1.8rem;} .area-calendar2 .tit-form1 select + select {margin:0;} .area-calendar2[data-cate="type1"] .tbl-calendar1 td > span:nth-child(1)[role="button"] {pointer-events:none;} .area-calendar2[data-cate="type2"] .tbl-calendar1 td > span:nth-child(1)[data-disabled] {position:relative;} .area-calendar2[data-cate="type2"] .tbl-calendar1 td > span:nth-child(1)[data-disabled]:after {content:attr(title);display:block;position:absolute;left:50%;top:100%;font-size:1.6rem;line-height:2.0rem;margin:2.0rem 0 ;font-weight:700;white-space:nowrap;transform:translateX(-50%);} .area-calendar2[data-cate="type2"] .tbl-calendar1 td > span:nth-child(1)[data-disabled="false"]:after {color:var(--g1);} .area-calendar2[data-cate="type2"] .tbl-calendar1 td > span:nth-child(1)[data-disabled="true"]:after {color:var(--g3);font-weight:400;} } @media only screen and (min-width:1024px){ .area-calendar2 .tit-form1 {padding:0 7.0rem;} .area-calendar2 .tit-form1 select + select {margin:0 0 0 0.5rem;} } @media only screen and (max-width:983px){ .area-calendar2 .tbl-calendar1 tr:first-of-type td .close {top:-3.2rem;padding:7.8rem 0 0;} .area-calendar2 .tit-form1 {margin:0 0 14.0rem;text-align:center;} .area-calendar2 .tit-form1 select {font-size:2.0rem;line-height:3.4rem;} .area-calendar2 .tit-form1 select option {font-size:1.6rem;} .area-calendar2 .tit-form1 [data-btn].icon-com1 {width:3.4rem;height:3.4rem;} .area-calendar2 .tit-form1 [data-btn].icon-com1:before {width:1.6rem;height:1.6rem;background-size:38.4rem 38.4rem;} .area-calendar2 .tit-form1 [data-btn].icon-com1.ic2:before, .area-calendar2 .tit-form1 [data-btn].icon-com1.ic3:before {background-position:-3.2rem -1.9rem;} .area-calendar2[data-siderow="2"] .tit-form1 {margin:0 0 calc(var(--com2) * 2 + 1.0rem + 4.0rem);} .area-calendar2[data-siderow="3"] .tit-form1 {margin:0 0 calc(var(--com2) * 3 + 2.0rem + 4.0rem);} } /* -------------------------------------------------------------------------------- COMPONENT : 임시 --------------------------------------------------------------------------------- */ .slick-slider {position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent;} .slick-list {position:relative;display:block;overflow:hidden;margin:0;padding:0;white-space:nowrap;font-size:0;} .slick-list:focus {outline:none;} .slick-list.dragging {cursor:pointer;cursor:hand;} .slick-slider .slick-track, .slick-slider .slick-list {-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);} .slick-track {position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto;} .slick-track:before, .slick-track:after{display:table;content:'';} .slick-track:after{clear:both;} .slick-loading .slick-track{visibility:hidden;} .slick-slide {display:none;display:inline-block;} .slick-slide img{display:block;} .slick-slide.slick-loading img{display:none;} .slick-slide.dragging img{pointer-events:none;} .slick-initialized .slick-slide{display:inline-block;} .slick-loading .slick-slide{visibility:hidden;} .slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent;} .slick-arrow.slick-hidden {display:none;} [dir='rtl'] .slick-slide{float:right;} @charset "utf-8"; /* -------------------------------------------------------------------------------- PAGE : 메인 : 기술연구소 --------------------------------------------------------------------------------- */ /* 공지사항 */ .list-newline1 > ul {margin:-0.8rem 0 0;} .list-newline1 > ul > li {display:flex;flex-wrap:wrap;gap:0.6rem 1.6rem;padding:1.8rem 0;font-size:var(--font1);line-height:2.0rem;color:var(--g1);} .list-newline1 > ul > li + li {border-top:0.1rem dashed var(--line3);} .list-newline1 > ul > li em {width:100%;} .list-newline1 > ul > li strong {overflow:hidden;flex:1;max-width:calc(100% - 9.0rem);text-overflow:ellipsis;white-space:nowrap;} .list-newline1 > ul > li strong ~ span {color:var(--g3);} @media only screen and (min-width:984px){ .list-newline1 > ul > li {gap:1.0rem 2.0rem;padding:1.4rem 0;} .list-newline1 > ul > li strong {font-size:1.6rem;line-height:2.2rem;} } @media only screen and (min-width:1680px){ .list-newline1 > ul {margin:-1.5rem 0 0;} .list-newline1 > ul > li {padding:2.2rem 0;} } .list-newline1 > ul:empty {position:relative;min-height:29.5rem;} .list-newline1 > ul:empty:before {content:attr(data-none);display:flex;align-items:center;justify-content:center;position:absolute;left:0;right:0;top:0.8rem;bottom:0;border:1px dashed var(--line3);border-radius:0.5rem;color:var(--g3);} @media only screen and (min-width:984px){ .list-newline1 > ul:empty {min-height:20.5rem;} } @media only screen and (min-width:1680px){ .list-newline1 > ul:empty {min-height:29.5rem;} } @media only screen and (max-width:983px){ .list-newline1 > ul:empty {min-height:15.8rem;} .list-data3 > ul:empty {min-height:9.1rem;} } /* 알림판 */ .list-newline2 {position:relative;border-radius:0.5rem;overflow:hidden;background:#2d221f;} .list-newline2 > ul > li {position:relative;border-radius:0.5rem;white-space:nowrap;} .list-newline2 > ul > li:before {content:'';display:block;width:100%;height:0;padding:45% 0 0;} .list-newline2 > ul > li > div {display:flex;flex-direction:column;justify-content:center;gap:0 0.5rem;position:absolute;left:0;right:0;top:0;bottom:0;padding:0 2.4rem 2.1rem;color:#fff;font-size:var(--font1);line-height:2.0rem;} .list-newline2 > ul > li > div span + strong {margin:0.5rem 0 0;} .list-newline2 > ul.swiper-wrapper {position:relative;display:flex;width:100%;height:100%;} .list-newline2 > ul.swiper-wrapper > li.swiper-slide {flex-shrink:0;} .list-newline2 .area-ctrl {display:flex;position:absolute;right:0;bottom:0;color:#fff;} .list-newline2 .area-ctrl .swiper-pagination {margin:0 2.0rem 0 0;font-size:1.2rem;line-height:4.5rem;} .list-newline2 .area-ctrl .swiper-pagination span:nth-child(1) {font-weight:700;} .list-newline2 .area-ctrl button {overflow:hidden;position:relative;width:4.5rem;height:4.5rem;background:rgba(0,0,0,0.6);} .list-newline2 .area-ctrl button, .list-newline2 .area-ctrl button::selection {color:transparent;font-size:0.1rem;} .list-newline2 .area-ctrl button[aria-disabled="true"]:after {opacity:0.3;} .list-newline2 .area-ctrl button:after {content:'';display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:2.0rem;height:2.0rem;background:var(--img1);background-position:-8.0rem -2.4rem;filter:invert();} .list-newline2 .area-ctrl button.swiper-button-prev:after {transform:rotate(-180deg);} @media only screen and (min-width:984px){ .list-newline2 > ul > li > div {padding:0 3.0rem 2.6rem;} .list-newline2 .area-ctrl .swiper-pagination {margin:0 2.7rem 0 0;} } /* 대관신청현황 */ .list-data3 > ul {position:relative;} .list-data3 > ul > li {display:flex;min-height:9.1rem;padding:2.0rem;border-radius:0.5rem;background:#fff;font-size:var(--font1);line-height:2.0rem;} .list-data3 > ul > li + li {margin:0.5rem 0 0;} .list-data3 .icon-state1, .list-data3 .data1 {font-weight:700;} .list-data3 > ul:empty:before {content:attr(data-none);display:flex;align-items:center;justify-content:center;position:absolute;left:0;right:0;top:0;bottom:0;border-radius:0.5rem;color:var(--g3);} .list-data3 [data-state="1"] {background:#BBC5FF;} .list-data3 [data-state="3"] .icon-state1 {color:#C29C57;} .list-data3 [data-state="4"] {color:#9fa4b4;} @media only screen and (min-width:984px){ .list-data3 > ul {min-height:27.5rem;} .list-data3 > ul > li {gap:0 2.0rem;min-height:6.5rem;padding:2.2rem 3.0rem;} .list-data3 > ul > li .icon-state1 {width:16.0rem;} } @media only screen and (max-width:983px){ .list-data3 > ul > li {min-height:6.0rem;box-shadow:inset 0 0 0 0.1rem var(--line2);} .list-data3 > ul > li {gap:0 2.0rem;} .list-data3 > ul > li .icon-state1 {width:12.0rem;} .list-data3 [data-state="1"] {box-shadow:none;} .list-data3 > ul:empty {min-height:15.0rem;} .list-data3 > ul:empty:before {border:1px dashed var(--line3);} } @media only screen and (max-width:640px){ .list-data3 > ul > li {flex-wrap:wrap;gap:0.2rem 0.8rem;} .list-data3 > ul > li .icon-state1 {width:100%;margin:0 0 0.8rem;} } /* 메인 컨텐츠 영역 */ .wrap-main .area {padding:var(--space4);background:#fff;box-shadow:0.2rem 0.2rem 0.3rem rgba(172, 177, 192, 0.5);border-radius:1.0rem;} .wrap-main .area-con2 {margin:2.0rem 0 0;} .wrap-main ~ .wrap-main {margin:3.0rem 0 0;} .wrap-main .area-con1 .con {background:#F6F7FA;padding:2.0rem;border-radius:0.5rem;} .wrap-main .area-con1 .con .mes-t1 {max-width:52.2rem;margin:0 auto;padding:2.2rem 0;} .wrap-main .area-con3 {width:100%;} @media only screen and (min-width:769px){ .wrap-main .area-con1 .con .mes-t1 {padding:3.6rem 0;} } @media only screen and (min-width:1440px){ .wrap-main .area-con1 .con {padding:4.0rem;} } @media only screen and (min-width:1680px){ .wrap-main {display:flex;justify-content:space-between;} .wrap-main .area-con1 {flex:1;} .wrap-main .area-con1 .con .mes-t1 {padding:5.0rem 0;} .wrap-main .area-con2 {width:55.0rem;margin:0 0 0 3.0rem;} .wrap-main .area-con2 .list-newline2 {margin:2.5rem 0 0;} } @media only screen and (min-width:984px) and (max-width:1679px){ .wrap-main .area-con2 .con {display:flex;align-items:center;gap:2.6rem;} .wrap-main .area-con2 .con .list-newline1 {flex:1;} .wrap-main .area-con2 .con .list-newline2 {width:41.0rem;} } @media only screen and (max-width:983px){ .wrap-main .area {padding:4.0rem var(--space4);} .wrap-main .area .tit-page {margin:0 0 2.0rem;} .wrap-main .area-con1 .con.list-data3 {padding:0;background:none;border-radius:0;} .wrap-main .area-con2 .list-newline2 {margin:2.0rem 0 0;} .list-newline2 > ul > li:before {padding:14.9rem 0 0;} } @media only screen and (max-width:768px){ .wrap-main .area {margin:0 -1.0rem;} .wrap-main .area-con2 {margin-top:1.0rem;} } /* -------------------------------------------------------------------------------- PAGE : 메인 : 고객용 --------------------------------------------------------------------------------- */ [data-page="home"]:not(.scroll) #header:after {display:none;} /* [data-page="home"] #wrapper { background-image:url(/images/content/img_visual1.png), url(/images/content/img_visual2.png), url(/images/content/img_visual3.png), url(/images/content/img_visual4.png); background-position:50% 50%, 50% 50%, 50% 50%, 50% 50%; background-repeat:no-repeat, no-repeat, no-repeat no-repeat;background-size:100% 100%;animation:changeVisual 20s infinite; background-attachment:fixed; } */ [data-page="home"] #wrapper {background:none;} [data-page="home"] #wrapper .background-image {position:fixed; top:0; left:0; width:100vw; height:100vh; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; transition:opacity 1s ease-in-out; z-index:-1;} [data-page="home"] #wrapper .background-image.hidden {opacity:0;} [data-page="home"] #wrapper {overflow:hidden;} [data-page="home"] #footer {color:#fff;} #container[data-page="home"] {padding:0 var(--space1) 4.0rem;} @keyframes changeVisual { 0% {background-image:url(/images/content/img_visual1.png), url(/images/content/img_visual2.png), url(/images/content/img_visual3.png), url(/images/content/img_visual4.png);} 25% {background-image:url(/images/content/img_visual2.png), url(/images/content/img_visual3.png), url(/images/content/img_visual4.png), url(/images/content/img_visual1.png);} 50% {background-image:url(/images/content/img_visual3.png), url(/images/content/img_visual4.png), url(/images/content/img_visual1.png), url(/images/content/img_visual2.png);} 75% {background-image:url(/images/content/img_visual4.png), url(/images/content/img_visual1.png), url(/images/content/img_visual2.png), url(/images/content/img_visual3.png);} 100% {background-image:url(/images/content/img_visual1.png), url(/images/content/img_visual2.png), url(/images/content/img_visual3.png), url(/images/content/img_visual4.png);} } .wrap-visual1 {position:relative;margin:0 calc(var(--space1) * -1);padding:5.0rem var(--space1);} .wrap-visual1 .area .slick-list {overflow:visible;} .wrap-visual1 .area-ctrl {position:absolute;color:#fff;white-space:nowrap;display:flex;align-items:center;justify-content:center;} .wrap-visual1 .area-ctrl .slick-dots li {display:none;font-weight:300;} .wrap-visual1 .area-ctrl .slick-dots li span:nth-child(1) {font-weight:800;} .wrap-visual1 .area-ctrl .slick-dots li.slick-active {display:inline-block;} .wrap-visual1 .area-ctrl .ui-arrow, .wrap-visual1 .area-ctrl .ui-play {position:relative;display:inline-flex;vertical-align:top;align-items:center;box-shadow:0 0 0 0.2rem inset #fff;border-radius:2.5rem;} .wrap-visual1 .area-ctrl .ui-arrow:before {content:'';position:absolute;left:50%;top:50%;width:0.6rem;height:0.1rem;background:#fff;transform:translateX(-50%);} .wrap-visual1 .area-ctrl .ui-arrow {padding:0 0.2rem;justify-content:space-between;gap:0 0.8rem;} .wrap-visual1 .area-ctrl .ui-arrow [class*="btn-"], .wrap-visual1 .area-ctrl .ui-play [class*="btn-"] {display:inline-flex;align-items:center;justify-content:center;width:3.0rem;height:3.0rem;overflow:hidden;font-size:0.1rem;color:transparent;} .wrap-visual1 .area-ctrl .ui-arrow [class*="btn-"]:before {content:'';background:var(--img1);filter:invert();} .wrap-visual1 .area-ctrl .ui-arrow .btn-prev:before {transform:rotate(-180deg);} .wrap-visual1 .area-ctrl .ui-play [class*="btn-"]:before {content:'';position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);} .wrap-visual1 .area-ctrl .ui-play .btn-stop:before {width:0.3rem;height:1.0rem;border-left:0.2rem solid #fff;border-right:0.2rem solid #fff;} .wrap-visual1 .area-ctrl .ui-play .btn-play:before {width:0;height:0;margin:0 0 0 0.1rem;border-left:0.7rem solid #fff;border-top:0.5rem solid transparent;border-bottom:0.5rem solid transparent;} .wrap-visual1[data-playmode="true"] .area-ctrl .ui-play .btn-play {display:none;} .wrap-visual1[data-playmode="false"] .area-ctrl .ui-play .btn-stop {display:none;} @media only screen and (min-width:984px) { .wrap-visual1 .area {width:calc((100vw - var(--space1) - var(--space1) - 12.0rem) * 0.65);} .wrap-visual1 .area .slick-slide {vertical-align:top;} .wrap-visual1 .area .slick-slide > div {overflow:hidden;position:relative;height:0;padding:56% 0 0;border-radius:2.5rem;overflow:hidden;} .wrap-visual1 .area .slick-slide > div img {position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;max-width:100%;max-height:100%;} .wrap-visual1 .area .slick-slide, .wrap-visual1 .area .slick-slide img {transition:all 0.3s ease-in-out;} .wrap-visual1 .area .slick-slide img {opacity:0;} .wrap-visual1 .area .slick-slide.slick-active img {opacity:1;} .wrap-visual1 .area .slick-slide.slick-active ~ .slick-slide > div {background:var(--g1);} .wrap-visual1 .area .slick-slide.slick-active ~ .slick-slide > div img {opacity:0.4;} .wrap-visual1 .area .slick-slide.slick-active + .slick-slide ~ .slick-slide {margin:0 0 0 3.0rem;} .wrap-visual1 .area .slick-slide.slick-active + .slick-slide {margin:0 0 0 12.0rem;} .wrap-visual1 .area .slick-slide.slick-active ~ .slick-slide {width:calc((100vw - var(--space1) - var(--space1) - 12.0rem) * 0.35) !important;padding:4.0rem 0;} .wrap-visual1 .area-ctrl {left:calc((100vw - var(--space1) - var(--space1) - 12.0rem) * 0.65);margin:0 0 0 var(--space1);top:5.0rem;bottom:5.0rem;padding:0 0 10.0rem;font-size:2.0rem;line-height:10.4rem;width:12.0rem;} .wrap-visual1 .area-ctrl .ui-paging {display:flex;align-items:center;justify-content:center;width:10.0rem;text-align:center;} .wrap-visual1 .area-ctrl .slick-dots li.slick-active {display:flex;flex-direction:column;} .wrap-visual1 .area-ctrl .slick-dots li span:nth-child(1) {font-size:4.0rem;} .wrap-visual1 .area-ctrl .slick-dots li span:nth-child(2) {position:relative;} .wrap-visual1 .area-ctrl .slick-dots li span:nth-child(2):before {content:'';display:block;position:absolute;left:50%;top:0;width:1.2rem;height:0.1rem;background:#fff;margin:0 0 0 -0.6rem;} .wrap-visual1 .area-ctrl .ui-arrow, .wrap-visual1 .area-ctrl .ui-play {position:absolute;left:100%;bottom:0;} .wrap-visual1 .area-ctrl .ui-arrow {gap:0 1.6rem;} .wrap-visual1 .area-ctrl .ui-arrow:before {width:1.2rem;} .wrap-visual1 .area-ctrl .ui-arrow [class*="btn-"], .wrap-visual1 .area-ctrl .ui-play [class*="btn-"] {width:5.0rem;height:5.0rem;} .wrap-visual1 .area-ctrl .ui-arrow [class*="btn-"]:before {width:2.5rem;height:2.5rem;background-size:60.0rem 60.0rem;background-position:-10.0rem -3.0rem;} .wrap-visual1 .area-ctrl .ui-play {margin:0 0 0 14.0rem;} .wrap-visual1 .area-ctrl .ui-play .btn-stop:before {width:0.5rem;height:1.6rem;border-left:0.3rem solid #fff;border-right:0.3rem solid #fff;} .wrap-visual1 .area-ctrl .ui-play .btn-play:before {border-left:1.2rem solid #fff;border-top:0.8rem solid transparent;border-bottom:0.8rem solid transparent;} } @media only screen and (min-width:1441px) { .wrap-visual1 {padding:var(--space1);} .wrap-visual1 .area {width:calc((100vw - var(--space1) - var(--space1) - 18.0rem) * 0.65);} .wrap-visual1 .area .slick-slide.slick-active ~ .slick-slide {padding:8.0rem 0;} .wrap-visual1 .area .slick-slide.slick-active + .slick-slide {margin:0 0 0 18.0rem;} .wrap-visual1 .area-ctrl {left:calc((100vw - var(--space1) - var(--space1) - 18.0rem) * 0.65);top:var(--space1);bottom:var(--space1);width:18.0rem;} } @media only screen and (min-width:1921px) { .wrap-visual1 .area {width:98.0rem;} .wrap-visual1 .area .slick-slide.slick-active ~ .slick-slide {width:51.6rem !important;} .wrap-visual1 .area-ctrl {left:98.0rem;} } @media only screen and (max-width:983px) { [data-page="home"] #wrapper {background-size:auto 100%;} .wrap-visual1 {padding:0;} .wrap-visual1 .area {margin:0 calc(var(--space1) * -1);padding:4.0rem var(--space1) 9.0rem;} .wrap-visual1 .area .slick-slide {padding:0 var(--space1);} .wrap-visual1 .area .slick-slide img {width:100%;} .wrap-visual1 .area-ctrl {left:0;right:0;bottom:3.0rem;gap:0 1.0rem;font-size:1.6rem;line-height:3.0rem;} .wrap-visual1 .area-ctrl .slick-dots li span:nth-child(2):before {content:' - ';} .wrap-visual1 .area-ctrl .ui-arrow [class*="btn-"]:before {width:1.6rem;height:1.6rem;background-size:38.4rem 38.4rem;background-position:-6.4rem -1.9rem;} } /* 메인 컨텐츠 영역 */ .wrap-main2 {padding:var(--space4);background:#fff;box-shadow:0.2rem 0.2rem 0.3rem rgba(172, 177, 192, 0.5);border-radius:1.0rem;} @media only screen and (min-width:984px){ .wrap-main2 div.area {position:relative;/*padding:0 calc(46.0rem + var(--space4)) 0 0;*/padding:0 40% 0 0;min-height:51.6rem;} .wrap-main2 .area + .area, .wrap-main2 [class*="area-con"] + [class*="area-con"] {margin:var(--space4) 0 0;} .wrap-main2 .tit-page {min-width:17.0rem;} } @media only screen and (min-width:1441px){ .wrap-main2 div.area {padding:0 calc(46.0rem + var(--space4)) 0 0;} } @media only screen and (max-width:983px){ .wrap-main2 {padding:4.0rem var(--space4);} .wrap-main2 .area + .area, .wrap-main2 [class*="area-con"] + [class*="area-con"] {margin:4.0rem 0 0;} } /* 대관시설안내 */ .wrap-main2 .area-con1 {position:relative;} .wrap-main2 .area-con1 .side {position:absolute;right:0;top:0;} @media only screen and (min-width:984px){ .wrap-main2 .area-con1 .tit-page {margin:0;} .wrap-main2 .area-con1 {display:flex;justify-content:space-between;gap:0 3.5rem;padding-right:5.0rem;} .wrap-main2 .area-con1 .side {bottom:0.4rem;} .wrap-main2 .area-con1 .side .icon-com4 {height:auto;height:100%;} } @media only screen and (max-width:983px){ .wrap-main2 .area-con1 .side {margin:-1.0rem;} } /* 바로가기메뉴 */ .wrap-main2 .area-con2.btn-set1 {margin:0;} .wrap-main2 .area-con2.btn-set1 > a {flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;background:#ECEFFF;padding:2.0rem;line-height:3.5rem;} .wrap-main2 .area-con2.btn-set1 > a span:not(:only-of-type):nth-of-type(1) {font-weight:900;} .wrap-main2 .area-con2.btn-set1 > a span + span {font-size:1.3rem;line-height:1.8rem;text-align:left;margin:2.0rem 0 0;} @media only screen and (min-width:984px){ .wrap-main2 .area-con2.btn-set1 > a {padding:3.0rem;line-height:5.0rem;} .wrap-main2 .area-con2.btn-set1 > a span + span {font-size:1.6rem;line-height:2.4rem;margin:3.0rem 0 0;} .wrap-main2 div.area .area-con4 {position:absolute;right:0;top:0;width:calc(40% - var(--space4));margin:0;} } @media only screen and (min-width:1441px){ .wrap-main2 div.area .area-con4 {width:46.0rem;} } @media only screen and (min-width:984px) and (max-width:1879px) { .wrap-main2 .area-con2.btn-set1 {flex-wrap:wrap;} .wrap-main2 .area-con2.btn-set1 > a {width:calc(50% - 0.7rem);flex:none;} .wrap-main2 .area-con2.btn-set1 > a span + span {margin:2.0rem 0 0;} } @media only screen and (min-width:984px) and (max-width:1680px) { .wrap-main2 .area-con2.btn-set1 > a {width:calc(50% - 0.35rem);} } /* 공지사항 */ @media only screen and (min-width:984px){ .wrap-main2 .area-con3 {display:flex;} .wrap-main2 .area-con3 .tit-page {flex-direction:column;margin:0;} .wrap-main2 .area-con3 .con {flex:1;max-width:calc(100% - 17.0rem);} .wrap-main2 .area-con3 .con .list-newline1 > ul > li {flex-wrap:nowrap;} .wrap-main2 .area-con3 .con .list-newline1 > ul > li em {width:14.0rem;} .wrap-main2 .area-con3 .con .list-newline1 > ul > li strong {max-width:calc(100% - 29.0rem);} } /* 알림판 */ .list-newline3 {position:relative;} .list-newline3 .swiper-wrapper {position:relative;display:flex;width:100%;height:100%;border-radius:0.5rem;overflow:hidden;} .list-newline3 .swiper-wrapper > li.swiper-slide {flex-shrink:0;} .list-newline3 .swiper-wrapper > li.swiper-slide div {position:relative;width:100%;height:0;padding:100% 0 0;} .list-newline3 .swiper-wrapper > li.swiper-slide div img {position:absolute;left:0;right:0;top:0;bottom:0;width:100%;} .list-newline3 .area-ctrl {text-align:center;margin:4.0rem 0 0;} .list-newline3 .swiper-pagination .swiper-pagination-bullet {display:inline-block;overflow:hidden;position:relative;width:1.6rem;height:1.6rem;font-size:0.1rem;white-space:nowrap;vertical-align:top;} .list-newline3 .swiper-pagination .swiper-pagination-bullet, .list-newline3 .swiper-pagination .swiper-pagination-bullet::selection {color:transparent;} .list-newline3 .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet {margin:0 0 0 0.7rem;} .list-newline3 .swiper-pagination .swiper-pagination-bullet:before {content:'';position:Absolute;left:0;right:0;top:0;bottom:0;border:0.1rem solid #0C0B15;border-radius:100%;transition:all 0.3s ease-in-out;} .list-newline3 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before {background:#0C0B15;} /* -------------------------------------------------------------------------------- PAGE : 대관안내 --------------------------------------------------------------------------------- */ article.wrap-section1 .headline h1 {font-weight:900;font-size:2.3rem;line-height:2.9rem;} article.wrap-section1 .headline .cate {margin:0 0 1.6rem;font-weight:900;font-size:1.4rem;line-height:2.0rem;} article.wrap-section1 .headline .info1 {display:flex;} article.wrap-section1 .headline .info2 {margin:2.0rem 0 0;} .view-bbs1 {margin:2.0rem 0 4.0rem;padding:4.0rem 0;border-top:0.3rem solid var(--line1);border-bottom:0.1rem solid var(--line1);} .view-bbs1:empty:before {content:'내용출력영역';display:block;line-height:50vh;text-align:center;background:var(--bg1);} @media only screen and (min-width:984px){ article.wrap-section1 .headline {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;} article.wrap-section1 .headline h1 {font-size:2.8rem;line-height:3.4rem;} article.wrap-section1 .headline .cate, article.wrap-section1 .headline .info2 {width:100%;} article.wrap-section1 .headline .cate {margin:0 0 2.0rem;font-size:2.0rem;line-height:2.6rem;} article.wrap-section1 .headline .info2 {margin:4.0rem 0 0;} .view-bbs1 {padding:7.0rem 0;margin:4.0rem 0 5.0rem;} } @media only screen and (min-width:1441px){ .view-bbs1 {padding:10.0rem 0;margin:5.0rem 0 7.0rem;} } @media only screen and (max-width:984px){ article.wrap-section1 .headline .info1 {margin:3.0rem 0 0;} } /* -------------------------------------------------------------------------------- PAGE : 대관신청 : 현황 --------------------------------------------------------------------------------- */ .wrap-section1[data-section="calendar"] {position:relative;padding-top:2.5rem;--space1:var(--space4);} .wrap-section1[data-section="calendar"] .area-bottom {margin-top:2.5rem;} .wrap-section1[data-section="calendar"] > .aside {text-align:right;} @media only screen and (min-width:984px){ .wrap-section1[data-section="calendar"] {padding-top:5.0rem;} .wrap-section1[data-section="calendar"] .area-bottom {margin-top:7.0rem;} .wrap-section1[data-section="calendar"] > .aside {right:var(--space1);top:5.0rem;} .wrap-section1[data-section="calendar"] > .aside.input-wrap1 {width:calc(100% - 34.0rem - (var(--space1) * 3));} } @media only screen and (max-width:983px){ .wrap-section1[data-section="calendar"] > .aside {left:var(--space1);right:var(--space1);top:7.4rem;} } .list-t2 {font-size:1.6rem;line-height:2.0rem;text-align:center;} .list-t2 > ul > li + li {margin:0.6rem 0 0;} .list-t2 > ul > li[data-state="end"] {text-decoration:line-through;font-weight:400;color:var(--g3);} .list-t2 > ul > li[data-state="ing"] {font-weight:700;text-shadow:0.2rem 0.2rem 0.4rem rgba(0, 0, 0, 0.2);} .list-t2 > ul > li [data-state] {overflow:hidden;position:absolute;left:-0.1rem;top:-0.1rem;width:0.1rem;height:0.1rem;opacity:0;} .list-t2 > ul > li [data-state="end"] + span {text-decoration:line-through;font-weight:400;color:var(--g3);} .list-t2 > ul > li [data-state="ing"] + span {font-weight:700;text-shadow:0.2rem 0.2rem 0.4rem rgba(0, 0, 0, 0.2);} .wrap-section1[data-section="calendar"] td .list-t2 {margin:2.0rem 0 0;} @media only screen and (min-width:984px){ .area-calendar2 .ui-label {display:none;} .area-calendar2 .ui-info {display:none;} } @media only screen and (max-width:983px){ .wrap-section1[data-section="calendar"] td .list-t2 {display:none;} .wrap-section1[data-section="calendar"] td .close {color:transparent;} .area-calendar2 .ui-label {margin:2.5rem 0 0;text-align:right;} .area-calendar2 .ui-label span {display:inline-flex;gap:0.5rem;vertical-align:top;align-items:center;white-space:nowrap;font-size:1.4rem;line-height:2.4rem;font-weight:700;} .area-calendar2 .ui-label span + span {margin:0 0 0 2.0rem;} .area-calendar2 .ui-label span:before {content:'';width:1.5rem;height:1.5rem;border-radius:100%;} .area-calendar2 .ui-label span:nth-last-child(3):before {background:#F5F5F8;border-radius:0;} .area-calendar2 .ui-label span:nth-last-child(2):before {background:#F5F5F8;} .area-calendar2 .ui-label span:nth-last-child(1):before {background:#DCE1FF;} .area-calendar2 .ui-label + .ui-info:not(:empty) {margin:-2.4rem 0 0;} .area-calendar2 .ui-info dt {display:flex;align-items:center;margin:0 0 2.5rem;font-size:2.0rem;line-height:2.4rem;font-weight:700;} .area-calendar2 .ui-info dt:before {content:'';width:2.0rem;height:2.0rem;margin:0 0.7rem 0 0;background:var(--g1) var(--img1);background-position:-14.6rem -0.2rem;border-radius:100%;} .area-calendar2 .ui-info dd {display:flex;justify-content:center;border:1px solid var(--line2);padding:2.0rem;} .area-calendar2 .ui-info dd .close {flex:1;display:block;margin:-2.0rem;line-height:12.0rem;text-align:center;background:#F6F7FA;color:#9FA4B4;} } /* -------------------------------------------------------------------------------- PAGE : 대관신청 : 목록 --------------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------------- PAGE : 대관신청 : 신청 --------------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------------- PAGE : 대관신청내역 : 기본 --------------------------------------------------------------------------------- */ .info-con1 {line-height:1.5;font-weight:500;} .info-con1 > li {display:flex;gap:1.4rem;} .info-con1 > li + li {margin:0.3rem 0 0;} .info-con1 > li > div:nth-child(2) {display:flex;flex-wrap:wrap;gap:0.4rem;} .info-con1 > li > div:nth-child(2) span {display:inline-block;} /* 목록 */ .list-data4 {border-top:0.3rem solid var(--line1);} .list-data4 > ul > li {position:relative;padding:2.7rem 0;font-size:var(--font1);font-weight:500;border-bottom:0.1rem solid var(--line3);} .list-data4 .data1 {display:flex;flex-wrap:wrap;gap:0 1.5rem;} .list-data4 .data1 span + span {position:relative;padding:0 0 0 1.4rem} .list-data4 .data1 span + span:before {content:'';display:block;position:absolute;left:0;top:50%;width:0.1rem;height:1.4rem;background:var(--g1);transform:translateY(-50%);} .list-data4 .tit {font-weight:900;font-size:1.6rem;} .list-data4 > ul > li:hover .tit, .list-data4 > ul > li:focus .tit {text-decoration:underline;} .list-data4 [class*="icon-state"] {position:absolute;right:0;top:3.0rem;} @media only screen and (min-width:984px){ .list-data4 > ul > li {padding:4.0rem 14.6rem 4.0rem 25%;} .list-data4 .data1, .list-data4 .tit {font-weight:900;} .list-data4 .tit {display:block;font-size:2.0rem;line-height:2.4rem;} .list-data4 .info {margin:2.5rem 0 0;} .list-data4 .data1, .list-data4 [class*="icon-state"] {position:absolute;top:50%;transform:translateY(-50%);} .list-data4 .data1 {left:3.0rem;width:calc(25% - 7.0rem);font-size:2.0rem;line-height:3.0rem;} .list-data4 [class*="icon-state"] {right:3.0rem;} } @media only screen and (min-width:1441px){ .list-data4 > ul > li {padding:4.0rem calc(8.6rem + var(--space1) * 2) 4.0rem 30%;} .list-data4 .data1 {left:var(--space1);width:calc(30% - 5.0rem);} .list-data4 [class*="icon-state"] {right:var(--space1);} } @media only screen and (max-width:983px){ .list-data4 > ul > li {display:flex;flex-direction:column;gap:1.6rem 0;} .list-data4 .data1, .list-data4 .tit {max-width:calc(100% - 6.0rem);font-size:1.6rem;line-height:2.2rem;} } /* 상세 : 요약정보1 */ .info-summary1 {position:relative;min-height:var(--com2);} .info-summary1 .btn {display:flex;} .info-summary1 .btn .btn-sub1 {font-weight:900;} .info-summary1 .tit {display:flex;flex-wrap:wrap;gap:0.5rem 1.3rem;} .info-summary1 .tit > :nth-child(1) {font-weight:900;} .info-summary1 .tit > :nth-child(1) span {display:inline-block;} @media only screen and (min-width:984px){ .info-summary1 .data1.info-con1 {font-size:1.8rem;} .info-summary1 .data1.info-con1 > li {gap:1.0rem;} .info-summary1 .tit:not(:first-child) {margin:2.0rem 0 0;align-items:center;} .info-summary1 .tit > :nth-child(1) {font-size:2.8rem;line-height:3.5rem;} } @media only screen and (min-width:520px){ .info-summary1 .btn {position:absolute;right:0;top:0;gap:0 1.0rem;} .info-summary1 .data1.info-con1 {display:flex;flex-wrap:wrap;max-width:calc(100% - 24.0rem);gap:0.4rem 3.0rem;padding:0.7rem 0;} .info-summary1 .data1.info-con1 > li + li {margin:0;} } @media only screen and (max-width:983px){ .info-summary1 .btn {margin:0 0 3.6rem;gap:0 0.5rem;} .info-summary1 .tit:not(:first-child) {margin:2.4rem 0 0;} .info-summary1 .tit > :nth-child(1) {font-size:2.0rem;} } /* 상세 : 요약정보2 */ .info-summary2 {display:flex;justify-content:space-between;align-items:center;} .info-summary2 .tit > :nth-child(1) {font-weight:900;} @media only screen and (min-width:1681px){ .info-summary2 {padding:0 3.0rem;} .info-summary2 .btn {right:3.0rem;} } @media only screen and (min-width:984px){ .info-summary2 .tit > :nth-child(1) {font-size:3.3rem;line-height:3.9rem;} } @media only screen and (max-width:983px){ .info-summary2 {flex-wrap:wrap;gap:1.2rem;} .info-summary2 .tit > :nth-child(1) {font-size:2.0rem;} } /* 상세 : 진행상세 : 대관진행상태 */ .info-progress1 > dl > dt {overflow:hidden;position:absolute;left:-0.1rem;top:-0.1rem;width:0.1rem;height:0.1rem;opacity:0;} .info-progress1 ol {display:flex;padding:1.0rem 0;} .info-progress1 ol > li {position:relative;flex:1;padding:3.5rem 0 0;text-align:center;} .info-progress1 ol > li:before, .info-progress1 ol > li:after, .info-progress1 ol > li span:before, .info-progress1 ol > li span:after {content:'';position:absolute;box-sizing:border-box;} .info-progress1 ol > li span {display:inline-block;position:relative;padding:0 2.8rem 0 0;font-size:1.8rem;line-height:4.0rem;color:var(--b1);font-weight:900;} .info-progress1 ol > li span:after {right:0.3rem;top:50%;width:2.0rem;height:2.0rem;margin:-1.0rem 0 0;background:var(--img1);background-position:-20.0rem -2.4rem;} .info-progress1 ol > li:before {left:0;right:0;top:0;height:1.4rem;background:#dcdfff;border-top:0.3rem solid var(--line1);border-bottom:0.3rem solid var(--line1);} .info-progress1 ol > li + li:after {left:-0.5rem;top:0.2rem;width:1.0rem;height:1.0rem;border-right:0.3rem solid var(--line1);border-bottom:0.3rem solid var(--line1);transform:rotate(-45deg);} .info-progress1 ol > li:nth-child(1):before {border-left:0.3rem solid var(--line1);border-radius:1.0rem 0 0 1.0rem;} .info-progress1 ol > li:nth-last-child(1):before {border-right:0.3rem solid var(--line1);border-radius:0 1.0rem 1.0rem 0;} .info-progress1 ol > li[aria-current="step"] span {background:var(--line1);padding:0 2.8rem;color:#fff;border-radius:2.0rem;font-weight:700;} .info-progress1 ol > li[aria-current="step"] span:after {width:0.8rem;height:0.8rem;background:var(--line1);right:50%;top:0;margin:-0.4rem -0.4rem 0 0;transform:rotate(45deg);} .info-progress1 ol > li[aria-current="step"] ~ li:before {border-top:0.3rem dashed var(--line3);border-bottom:0.3rem dashed var(--line3);background:#fff;} .info-progress1 ol > li[aria-current="step"] ~ li:nth-last-child(1):before {border-right:0.3rem dashed var(--line3);} .info-progress1 ol > li[aria-current="step"] ~ li span {font-weight:500;color:#828692;} .info-progress1 ol > li[aria-current="step"] ~ li span:after {display:none;} .info-progress1 ol > li[aria-current="step"] ~ li + li:after {box-shadow:none;border-right:0.3rem dashed var(--line3);border-bottom:0.3rem dashed var(--line3);} @media only screen and (min-width:1681px){ .info-progress1 ol > li span {padding:0 2.8rem;} } @media only screen and (max-width:983px){ .info-progress1 ol {overflow-x:auto;} /* .info-progress1 ol::-webkit-scrollbar {height:0.4rem;} .info-progress1 ol::-webkit-scrollbar-track {background-color:var(--g4);border-radius:0.2rem;} .info-progress1 ol::-webkit-scrollbar-thumb {background-color:var(--line2);} */ .info-progress1 ol {padding:0;} .info-progress1 ol > li {min-width:10.0rem;padding:2.5rem 0 0;} .info-progress1 ol > li span {padding:0 2.0rem;font-size:1.4rem;line-height:3.6rem;} .info-progress1 ol > li span:after {width:1.6rem;height:1.6rem;margin:-0.8rem 0 0;background-size:38.4rem 38.4rem;;background-position:-16.0rem -1.92rem;} .info-progress1 ol > li[aria-current="step"] span {padding:0 2.0rem;} } /* 상세 : 진행상세 : 대관진행내역*/ .list-t3 > dl > dt {position:relative;display:flex;align-items:center;gap:0 1.8rem;margin:0 0 2.0rem;font-size:1.6rem;line-height:2.8rem;font-weight:900;} .list-t3 > dl > dt:before {content:'';display:inline-block;width:3.5rem;height:3.0rem;margin:-0.1rem 0;background:var(--img1);background-position:-6.0rem -4.4rem;vertical-align:top;} .list-t3 > dl > dd > ul {overflow-y:scroll;} .list-t3 > dl > dd > ul::-webkit-scrollbar {width:0.4rem;} .list-t3 > dl > dd > ul::-webkit-scrollbar-track {background-color:var(--g4);border-radius:0.2rem;} .list-t3 > dl > dd > ul::-webkit-scrollbar-thumb {background-color:#828692;} .list-t3 ul {font-size:var(--font1);line-height:1.6rem;} .list-t3 ul > li {display:flex;color:#828692;} .list-t3 ul > li + li {margin:1.6rem 0 0;} .list-t3 ul > li > span:nth-child(1) {width:9.0rem;} .list-t3 ul > li > span:nth-child(2) {flex:1;} .list-t3 ul > li:nth-child(1) {font-weight:700;color:var(--g1);} @media only screen and (min-width:984px){ .list-t3 > dl > dd > ul {height:12.2rem;} .list-t3 ul {line-height:1.8rem;} .list-t3 ul > li > span:nth-child(1) {width:10.0rem;} } @media only screen and (min-width:1281px){ .list-t3 > dl {display:flex;justify-content:space-between;align-items:flex-start;gap:0 5.0rem;} .list-t3 > dl > dt {margin:0;} .list-t3 > dl > dd {flex:1;padding:0.5rem 0;} .list-t3 > dl > dd > ul {height:15.6rem;} } @media only screen and (min-width:1681px){ .list-t3 > dl {gap:0 7.0rem;} } @media only screen and (max-width:983px){ .list-t3 > dl > dd > ul {height:14.4rem;margin:0 -0.8rem 0 0;} } /* 상세 : 진행상세 */ .area-toggle3 {position:relative;background:var(--bg1);border-radius:1.0rem;padding:1.0rem 1.0rem 7.9rem;margin:5.0rem 0 0;} .area-toggle3 [aria-expanded] {position:absolute;padding:0 6.4rem 0 2.0rem;font-weight:500;background:#fff;border:0.1rem solid #7C82A8;border-radius:0.5rem;text-align:left;line-height:4.9rem;} .area-toggle3 [aria-expanded]:before, .area-toggle3 [aria-expanded]:after {content:'';position:absolute;top:50%;right:0.7rem;} .area-toggle3 [aria-expanded]:before {pointer-events:none;width:4.5rem;height:3.5rem;background:#7C82A8;border-radius:0.5rem;box-shadow:0 0.3rem 0.3rem rgba(0, 0, 0, 0.16);transform:translateY(-50%);} .area-toggle3 [aria-expanded]:after {width:2.0rem;height:2.0rem;margin:-0.9rem 1.2rem 0 0;background:var(--img1);background-position:-8.0rem -2.4rem;transform:rotate(90deg);filter:invert(1);} .area-toggle3 [aria-expanded="true"]:after {transform:rotate(-90deg);} .area-toggle3 .info-progress1, .area-toggle3 .list-t3 {padding:3.0rem;background:#fff;border-radius:0.5rem;} .area-toggle3 .list-t3, .area-toggle3 .list-t3 > dl > dd > ul::-webkit-scrollbar-track {background:#FFFEF4;} .area-toggle3 .list-t3 > dl > dd > ul::-webkit-scrollbar-thumb {background:rgba(130, 134, 146, 0.2);} .area-toggle3 .list-t3 > dl {margin:-0.2rem 0;} .area-toggle3 .area-btn4 {margin:0;} @media only screen and (min-width:769px){ .area-toggle3 {padding:2.0rem 2.0rem 9.4rem;} .area-toggle3 [aria-expanded] {min-width:22.0rem;} } @media only screen and (min-width:984px){ .area-toggle3 {display:flex;flex-wrap:wrap;gap:1.0rem 2.0rem;margin:4.0rem 0 0;} .area-toggle3 [aria-expanded] {left:2.0rem;right:2.0rem;bottom:2.0rem;min-width:28.0rem;line-height:5.4rem;font-weight:900;} .area-toggle3 .info-progress1, .area-toggle3 .list-t3 {padding:3.0rem 4.0rem;} .area-toggle3 .info-progress1 {width:100%;} .area-toggle3 .list-t3 {flex:1;padding-right:2.0rem;} .area-toggle3 .area-btn4 {width:33.0rem;} } @media only screen and (min-width:1441px){ .area-toggle3 {padding:2.0rem 32.0rem 2.0rem 2.0rem;} .area-toggle3 [aria-expanded] {left:unset;top:2.0rem;bottom:unset;} .area-toggle3 .info-progress1 {padding:4.0rem 5.0rem;} .area-toggle3 .list-t3 {padding:3.5rem 1.0rem 3.0rem 4.0rem;} } @media only screen and (max-width:983px){ .area-toggle3 {margin:3.0rem 0 0;display:flex;flex-direction:column;gap:1.0rem 0;} .area-toggle3 [aria-expanded] {left:2.0rem;bottom:2.0rem;right:2.0rem;} } @media only screen and (max-width:768px){ .area-toggle3 [aria-expanded] {left:1.0rem;bottom:1.0rem;right:1.0rem;} .area-toggle3 .info-progress1, .area-toggle3 .list-t3 {padding:3.0rem 2.0rem;} } /* 상세 : 진행상세 : 닫힌상태 */ .area-toggle3:not(.active) .info-progress1, .area-toggle3:not(.active) .area-btn4, .area-toggle3:not(.active) .list-t3 ul > li:nth-child(1) ~ li, .area-toggle3:not(.active) [aria-expanded] ~ [aria-expanded] {display:none;} .area-toggle3:not(.active) .list-t3 {padding:0;background:none;} .area-toggle3:not(.active) .list-t3 > dl {margin:0;padding:1.0rem 1.0rem 0;display:flex;} .area-toggle3:not(.active) .list-t3 > dl > dt {display:block;width:3.5rem;overflow:hidden;white-space:nowrap;margin:0 2.0rem 0 0;} .area-toggle3:not(.active) .list-t3 > dl > dd {width:calc(100% - 5.5rem);padding:0;} .area-toggle3:not(.active) .list-t3 > dl > dd > ul {height:2.8rem;padding:0;overflow:hidden;} .area-toggle3:not(.active) .list-t3 > dl > dd > ul > li {display:block;line-height:2.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .area-toggle3:not(.active) .list-t3 > dl > dd > ul > li > span:nth-child(1) {width:auto;margin:0 10px 0 0;} @media only screen and (min-width:769px){ .area-toggle3:not(.active) {padding:1.0rem;} .area-toggle3:not(.active) .list-t3 > dl {padding:1.0rem 2.0rem 1.1rem;gap:0;} .area-toggle3:not(.active) [aria-expanded] {left:auto;right:1.0rem;bottom:1.0rem;top:1.0rem;} } @media only screen and (min-width:984px){ .area-toggle3:not(.active) .list-t3 > dl {padding:1.3rem 3.0rem;} } @media only screen and (min-width:1680px){ .area-toggle3:not(.active) [aria-expanded] {right:2.0rem;} } /* 상세 : 진행상세 : 열린상태 */ .area-toggle3.active [aria-expanded] {display:none;} .area-toggle3.active [aria-expanded] ~ [aria-expanded] {display:block;} /* -------------------------------------------------------------------------------- PAGE : 대관신청내역 : 대관일정 --------------------------------------------------------------------------------- */ .con-toggle1 {text-align:left;} .con-toggle1 > dl {display:flex;flex-direction:column;align-items:flex-start;} .con-toggle1 > dl > dt, .con-toggle1 > dl > dd {position:relative;padding:0 0 0 4.2rem;white-space:nowrap;} .con-toggle1 > dl > dt {line-height:2.6rem;} .con-toggle1 > dl > dt:before, .con-toggle1 > dl > dt:after, .con-toggle1 > dl > dd:before {content:'';display:block;position:absolute;left:0;top:0;box-sizing:border-box;} .con-toggle1 > dl > dt:before {width:2.6rem;height:2.6rem;border:0.1rem solid var(--line1);border-radius:0.1rem;} .con-toggle1 > dl > dt:after {width:2.0rem;height:2.0rem;background:var(--img1);background-position:-4.0rem -2.4rem;margin:0.3rem;} .con-toggle1 > dl > dd {line-height:calc(var(--font1) + 1.8rem);color:#6E759F;} .con-toggle1 > dl > dd:before {width:1.0rem;height:0.8rem;border-left:0.2rem solid #6E759F;border-bottom:0.2rem solid #6E759F;top:50%;margin:-0.4rem 0 0 0.8rem;} .con-toggle1 > dl > dt[aria-expanded="false"] ~ dd {display:none;} .con-toggle1 > dl > dt[aria-expanded="true"] {margin:0 0 0.9rem;} .con-toggle1 > dl > dt[aria-expanded="true"]:after {transform:rotate(-180deg);} /* -------------------------------------------------------------------------------- PAGE : 대관신청내역 : 납부내역 --------------------------------------------------------------------------------- */ .list-data5 > ul > li, .list-data5 > sub {display:flex;font-size:1em;justify-content:space-evenly;align-items:center;gap:0 2.4rem;padding:2.3rem 2.4rem;} .list-data5 > div {overflow:hidden;position:absolute;left:-0.1rem;top:-0.1rem;width:0.1rem;height:0.1rem;opacity:0;} .list-data5 > ul > li + li {border-top:0.1rem dashed var(--line3);} .list-data5 > ul > li dl > dt {overflow:hidden;position:absolute;left:-0.1rem;top:-0.1rem;width:0.1rem;height:0.1rem;opacity:0;} .list-data5 > ul > li dl > dd:not(:only-of-type), .list-data5 > ul > li dl.data1 > dd {text-align:left;display:flex;gap:0 0.4rem;} .list-data5 .data1 {flex:1;} .list-data5 .data1:not(:first-child) {padding:0 0 0 3.0rem;} .list-data5 .data2 {width:10.0rem;} .list-data5 .data3 {width:14.0rem;} .list-data5 .data3 strong span {display:block;} .list-data5 .data3 strong span + span {color:var(--primary-c3);} .list-data5 .data4 {width:9.0rem;} .list-data5 [data-state="5"] .data2 + .data2 {color:#FE684B;} @media only screen and (max-width:983px){ .list-data5 > ul > li, .list-data5 > sub {padding:1.5rem 1.2rem;} .list-data5 .data2 {width:9.0rem;} .list-data5 .data3 {width:12.0rem;} } .con-t1 {text-align:left;display:flex;flex-wrap:wrap;gap:1.2rem 0;} .con-t1 > div {display:flex;font-weight:800;} .con-t1 strong {display:inline-flex;gap:0 var(--space3);font-weight:800;} .con-t1 strong span + span {color:var(--primary-c3);} /* -------------------------------------------------------------------------------- PAGE : 기타 : 약관컨텐츠 --------------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------------- PAGE : 회원서비스 --------------------------------------------------------------------------------- */ .wrap-section2 .section, .wrap-section2 .nav-tab1 {max-width:55.0rem;margin:0 auto;} .wrap-section2 .nav-tab1 {margin:0 auto 3.0rem;} [data-page="sub"] .wrap-section1 {box-shadow:none;border:0.1rem solid var(--line3);} [data-page="sub"] .wrap-section1.t2 {box-shadow:none;} @media only screen and (min-width:984px){ .wrap-section2 .section {padding:6.9rem;border:0.1rem solid var(--line3);border-radius:1.0rem;} .wrap-section2 .nav-tab1 {margin:0 auto -0.1rem;} .wrap-section2 .nav-tab1 ~ .section {border-radius:0 0 1.0rem 1.0rem;} [data-page="sub"] .wrap-section1.t2 {border:0.1rem solid var(--line3);padding:6.0rem var(--space1)} [data-page="sub"] .nav-tab1 ~ .wrap-section1.t2 {margin:-0.2rem 0 0;border-radius:0 1.0rem 1.0rem 1.0rem;} [data-page="sub"] .nav-tab1 ~ .wrap-section1.t2 .form-wrap1:nth-child(1) {padding-top:4.0rem;} } @media only screen and (max-width:983px){ .nav-tab1 + .list-con2 {margin-top:5.0rem;} [data-page="sub"] .wrap-section1.t2 {border:0;} [data-page="sub"] .wrap-section1.t2 {margin:-2.0rem;} } @media only screen and (min-width:769px) and (max-width:983px){ [data-page="sub"] .wrap-section1.t2 {margin:-2.0rem -3.0rem;} [data-page="sub"] .wrap-section1.t2 {padding:0;} [data-page="sub"] .wrap-section1.t2 .section ~ .section:before {left:3.0rem;right:3.0rem;} } @charset "utf-8"; /* -------------------------------------------------------------------------------- PAGE : 가이드용 --------------------------------------------------------------------------------- */ .data-progress1 {position:absolute;right:0;top:0;text-align:right;line-height:4.6rem;} .tit-guide1 {margin:0 0 4.0rem;font-size:1.6rem;line-height:4.0rem;padding:0 2.4rem;background:var(--primary-c1);color:var(--g1);box-shadow:0 0.1rem 0.3rem var(--line3);font-weight:400;} .tit-guide1 ~ .tit-guide1 {margin-top:5.6rem;} #header h1.logo > span:nth-child(1) {display:block;overflow:hidden;white-space:nowrap;width:5.2rem;} #header h1.logo > span:nth-child(1):before {display:inline-block;vertical-align:middle;} @media only screen and (min-width:984px){ #header h1.logo > span:nth-child(1) {width:8.3rem;} #header h1.logo ~ .nav-menu nav > ul > li > a {padding:0 1.0rem;} #header h1.logo ~ .nav-menu nav > ul > li > a:before {left:1.0rem;right:1.0rem;} } @media only screen and (max-width:983px){ #header h1.logo ~ .nav-menu nav > ul > li > a {font-size:1.5rem;} #header h1.logo ~ .nav-menu nav > ul > li + li {margin:2.0rem 0 0;} } .nav {position:relative;} .nav > ul {white-space:nowrap;overflow-x:scroll;text-align:center;padding:0 var(--space1);} .nav > ul::-webkit-scrollbar {height:0.2rem;} .nav > ul > li {display:inline-block;} .nav > ul > li + li {margin:0 0 0 1.0em;} .nav > ul > li > a {display:block;position:relative;font-size:var(--font2);line-height:calc(var(--header) / 2);color:#fff;font-weight:400;} .nav > ul > li > a:before {content:'';display:block;position:absolute;left:0;right:0;bottom:0;height:0;background:transparent;transition:all 0.3s ease-in-out;} .nav > ul > li > a[aria-current="page"]:before {height:0.2rem;background:var(--primary-c1);} /* 목록테이블 */ .tbl-guide1 {border-top:0.1rem solid var(--line1);background:#fff;} .tbl-guide1 table {width:100%;table-layout:fixed;} .tbl-guide1 table th, .tbl-guide1 table td {padding:0.9rem 1.0rem;border-bottom:0.1rem solid var(--line3);border-left:0.1rem solid var(--line3);font-size:1.4rem;line-height:1.5;text-align:center;} .tbl-guide1 table tr td:first-child, .tbl-guide1 table tr:not(.sub) th:first-child {border-left:0;} .tbl-guide1 table thead th {font-weight:600;} .tbl-guide1 table td.file {text-align:left;} .tbl-guide1:not(:first-child) {margin-top:0.8rem;} .tbl-guide1[data-html-process="data"] tbody a {display:inline-block;color:var(--primary-c3);border-bottom:0.1rem solid var(--primary-c3);} .tbl-guide1[data-html-process="data"] table td:nth-child(1) ~ td:not(.end):not(.modify) {text-align:left;} .tbl-guide1[data-html-process="data"] tbody td.file {text-align:left;} .tbl-guide1[data-html-process="data"] tbody td.modify .con {display:none;} .tbl-guide1[data-html-process="data"] tbody td[data-end] {position:relative;} .tbl-guide1[data-html-process="data"] tbody td[data-end]:after {content:'~'attr(data-end);font-size:1.1rem;color:var(--g3);position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);} .tbl-guide1[data-html-process="data"] tbody td.memo {font-size:1.3rem;color:var()} .tbl-guide1[data-html-process="data"] tr[data-state="wait"] td {background:rgba(0,0,0,0.02);color:var(--g3);} .tbl-guide1[data-html-process="data"] tr[data-state="wait"] td.end:before {content:'작업대기';display:inline-block;font-size:1.3rem;line-height:2.4rem;} .tbl-guide1[data-html-process="data"] tr[data-state="ing"] td.end:before {content:'작업진행';display:inline-block;font-size:1.3rem;line-height:2.4rem;color:var(--primary-c1);} .tbl-guide1[data-html-process="data"] tr[data-state="modify"] td.memo:before {content:'수정진행';display:inline-block;padding:0 0.6rem;font-size:1.3rem;line-height:2.4rem;background:var(--primary-c3);color:var(--g1);} /* 목록테이블 : 해상도별 노출목록 조절 */ .tbl-guide1[data-html-process="data"] table th:nth-child(1), .tbl-guide1[data-html-process="data"] table td:nth-child(1) {width:6.0rem;} .tbl-guide1[data-html-process="data"] table th:nth-child(2), .tbl-guide1[data-html-process="data"] table td:nth-child(2), .tbl-guide1[data-html-process="data"] table th:nth-child(3), .tbl-guide1[data-html-process="data"] table td:nth-child(3), .tbl-guide1[data-html-process="data"] table th:nth-child(4), .tbl-guide1[data-html-process="data"] table td:nth-child(4), .tbl-guide1[data-html-process="data"] table th:nth-child(5), .tbl-guide1[data-html-process="data"] table td:nth-child(5) {width:14.0rem;} .tbl-guide1[data-html-process="data"] table th:nth-last-child(4), .tbl-guide1[data-html-process="data"] table td:nth-last-child(4) {width:14.0rem;} .tbl-guide1[data-html-process="data"] table th:nth-last-child(2), .tbl-guide1[data-html-process="data"] table td:nth-last-child(2), .tbl-guide1[data-html-process="data"] table th:nth-last-child(3), .tbl-guide1[data-html-process="data"] table td:nth-last-child(3) {width:8.0rem;} @media only screen and (max-width:983px){ .tbl-guide1[data-html-process="data"] table th:nth-last-child(4) ~ th, .tbl-guide1[data-html-process="data"] table td:nth-last-child(4) ~ td {display:none;} } @media only screen and (max-width:640px){ .tbl-guide1 table {table-layout:auto;} .tbl-guide1[data-html-process="data"] table th:nth-child(1), .tbl-guide1[data-html-process="data"] table td:nth-child(1) {display:none;} } hr.line1 {clear:both;display:block;width:100%;height:0;border:0;margin:3.0rem 0;border-top:0.1rem dashed var(--line3);} hr.line2 {clear:both;display:block;width:100%;height:0;border:0;margin:1.0rem 0;} hr.line3 {clear:both;display:block;width:100%;height:0;border:0;margin:3.0rem 0;border-top:1.2rem solid var(--color-gray4);} .tit-sub1.line {margin-top:5.6rem 0;padding-top:4.0rem;border-top:1.2rem solid var(--color-gray4);} /* 구조가이드 */ fieldset.guide {margin:3.2rem 0 0;position:relative;padding:2.4rem;border:1px dashed #c1c2c8;background:#fff;} fieldset.guide legend {width:auto;height:auto;margin:0 0 0 -2.5rem;padding:0 1.2rem;font-size:1.3rem;line-height:3.2rem;font-weight:500;color:var(--color-gray0);white-space:normal;background:#dae0e5;border:1px solid var(--line3);} fieldset.guide fieldset.guide fieldset.guide fieldset.guide {border:1px dashed #c1c2c8;} fieldset.guide fieldset.guide fieldset.guide fieldset.guide legend {background:transparent;border-color:transparent;line-height:1.2;} [id^="uiPOPModify"] .con > dl {display:flex;border-top:0.1rem solid var(--line2);border-bottom:0.1rem solid var(--line2);font-size:1.4rem;} [id^="uiPOPModify"] .con > dl > dt {width:10.0rem;text-align:center;background:var(--g4);} [id^="uiPOPModify"] .con > dl > dt, [id^="uiPOPModify"] .con > dl > dd {padding:1.0rem;} /* Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard. https://github.com/orioncactus/pretendard This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL */ @font-face { font-family: 'Pretendard'; font-weight: 900; font-display: swap; src: local('Pretendard Black'), url(/include/css/font/Pretendard-Black.woff2) format('woff2'), url(/include/css/font/Pretendard-Black.woff) format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 800; font-display: swap; src: local('Pretendard ExtraBold'), url(/include/css/font/Pretendard-ExtraBold.woff2) format('woff2'), url(/include/css/font/Pretendard-ExtraBold.woff) format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 700; font-display: swap; src: local('Pretendard Bold'), url(/include/css/font/Pretendard-Bold.woff2) format('woff2'), url(/include/css/font/Pretendard-Bold.woff) format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 600; font-display: swap; src: local('Pretendard SemiBold'), url(/include/css/font/Pretendard-SemiBold.woff2) format('woff2'), url(/include/css/font/Pretendard-SemiBold.woff) format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 500; font-display: swap; src: local('Pretendard Medium'), url(/include/css/font/Pretendard-Medium.woff2) format('woff2'), url(/include/css/font/Pretendard-Medium.woff) format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 400; font-display: swap; src: local('Pretendard Regular'), url(/include/css/font/Pretendard-Regular.woff2) format('woff2'), url(/include/css/font/Pretendard-Regular.woff) format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 300; font-display: swap; src: local('Pretendard Light'), url(/include/css/font/Pretendard-Light.woff2) format('woff2'), url(/include/css/font/Pretendard-Light.woff) format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 200; font-display: swap; src: local('Pretendard ExtraLight'), url(/include/css/font/Pretendard-ExtraLight.woff2) format('woff2'), url(/include/css/font/Pretendard-ExtraLight.woff) format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 100; font-display: swap; src: local('Pretendard Thin'), url(/include/css/font/Pretendard-Thin.woff2) format('woff2'), url(/include/css/font/Pretendard-Thin.woff) format('woff'); } .dialogfont { font-family: "돋움"; font-size: 11px; line-height: 16px; } .ui-button-text { font-family: "돋움"; font-size: 11px; } .ui-autocomplete { max-height: 300px; overflow-y: auto; overflow-x: hidden; padding-right: 10px; } .ui-dialog .ui-dialog-content { padding: 0px !important; border: none; } .ui-dialog { z-index: 10000 !important; } .nocss { } .doublecursor { cursor: hand; cursor: pointer; } .imekor { ime-mode: active; } .imeeng { ime-mode: inactive; } .imedisable { ime-mode: disabled; } .onlynumber { } .noinput { } .inlinetooltip { color: #ABADB3; } .displayNone { display: none; } .ajaxCenter { position: fixed; left: 50%; top: 50%; z-index: 1000; } .originalTextareaInfo { font-size: 12px; color: #000000; font-family: Tahoma, sans-serif; text-align: right } .warningTextareaInfo { font-size: 12px; color: #FF0000; font-family: Tahoma, sans-serif; text-align: right } hr { clear: both; display: block; visibility: hidden; height: 10px } .tl { text-align: left } .tc { text-align: center !important } .tr { text-align: right } .fr { float: right } .fl { float: left } /* 모달 윈도우 */ .blocker { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: auto; z-index: 10001; padding: 20px; box-sizing: border-box; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.75); text-align: center; } .blocker:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.05em; } .blocker.behind { background-color: transparent; } .modal { z-index: 110; box-sizing: border-box; background: #fff; padding: 30px 30px 5px 30px; vertical-align: middle; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; -o-box-shadow: 0 0 10px #000; -ms-box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000; text-align: left; } .modal a.close-modal { position: absolute; top: -12.5px; right: -12.5px; display: block; width: 30px; height: 30px; text-indent: -9999px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAANjr9RwUqgAAACBjSFJNAABtmAAAc44AAPJxAACDbAAAg7sAANTIAAAx7AAAGbyeiMU/AAAG7ElEQVR42mJkwA8YoZjBwcGB6fPnz4w/fvxg/PnzJ2N6ejoLFxcX47Rp036B5Dk4OP7z8vL+P3DgwD+o3v9QjBUABBALHguZoJhZXV2dVUNDgxNIcwEtZnn27Nl/ZmZmQRYWFmag5c90dHQY5OXl/z98+PDn1atXv79+/foPUN9fIP4HxRgOAAggRhyWMoOwqKgoq6GhIZe3t7eYrq6uHBDb8/Pz27Gysloga/jz588FYGicPn/+/OapU6deOnXq1GdgqPwCOuA31AF/0S0HCCB0xAQNBU4FBQWB0NBQublz59oADV37Hw28ePHi74MHD/6ii3/8+HEFMGQUgQ6WEhQU5AeZBTWTCdkigABC9ylIAZeMjIxQTEyMysaNG/3+/v37AGTgr1+//s2cOfOXm5vbN6Caz8jY1NT0a29v76/v37//g6q9sHfv3khjY2M5YAgJgsyEmg0PYYAAQreUk4+PT8jd3V1l1apVgUAzfoIM2rlz5x9gHH5BtxAdA9PB1zNnzvyB+R6oLxoopgC1nBPZcoAAgiFQnLIDMb+enp5iV1eXBzDeHoI0z58//xcwIX0mZCkMg9S2trb+hFk+ffr0QCkpKVmQ2VA7QHYxAgQQzLesQMwjIiIilZWVZfPu3bstMJ+SYikyBmUzkBnA9HEMyNcCYgmQHVC7mAACCJagOEBBbGdnp7lgwYJEkIavX7/+BcY1SvAaGRl9tba2xohjMTGxL8nJyT+AWQsuxsbG9vnp06e/QWYdPHiwHmiWKlBcCGQXyNcAAQSzmBuoSQqYim3u37+/EKR48uTJv5ANB+bVr7Dga2xs/AkTV1JS+gq0AJyoQIkPWU9aWtoPkPibN2/2A/l6QCwJ9TULQADB4hcY//xKXl5eHt++fbsAUmxhYYHiM1DiAsr9R7ZcVVUVbikIdHd3/0TWIyws/AWYVsByAgICdkAxRSAWAGI2gACClV7C4uLiOv7+/lEgRZ8+ffqLLd6ABck3ZMuB6uCWrlu37je29HDx4kVwQisvL88FFqkaQDERUHADBBAomBl5eHiYgQmLE1hSgQQZgIUD1lJm69atf4HR8R1YKoH5QIPAWWP9+vV/gOI/gHkeQw+wGAXTwAJJ5t+/f/BUDRBA4NIEKMDMyMjICtQIiniG379/4yza7t69+//Lly8oDrty5co/bJaCAEwcZCkwwTJDLWYCCCCwxcDgY3z16hXDnTt3voP4EhISWA0BFgZMwNqHExh3jMiG1tbWsgHjnA2bHmAeBtdWwOL1MycnJ7wAAQggBmi+kgIW/OaKiorJwOLuFShO0LMSMPF9AUYBSpz6+vqixHlOTs4P9MIEWHaDsxSwYMoE2mEGFJcG5SKAAGJCqjv/AbPUn8ePH98ACQQHB6NUmZqamkzABIgSp5s3bwbHORCA1QDLAWZkPc7OzszA8oHl5cuXVy5duvQBGIXwWgoggGA+FgO6xkBNTS28r69vDrT2+Y1cIMDyJchX6KkXVEmAshd6KB06dAic94EO3AzkBwGxPhCLg8ptgACCZyeQp9jZ2b2AmsuAefM8tnxJCk5ISPgOLTKfAdNEOVDMA2QHLDsBBBC8AAFlbmCLwlZISCg5JSVlJizeQAaQaimoWAUFK0g/sGGwHiiWCMS2yAUIQAAxI7c4gEmeFZi4OJ48ecLMzc39CRiEmgEBASxA/QzA8vYvAxEgNjaWZc2aNezAsprp2LFjp4FpZRdQ+AkQvwLij0AMSoC/AQIIXklAC3AVUBoBxmE8sPXQAiyvN8J8fuPGjR/h4eHf0eMdhkENhOPHj8OT+NGjR88BxZuBOA5kJtRseCUBEECMSI0AdmgBDooDaaDl8sASTSkyMlKzpqZGU1paGlS7MABLrX83b978A6zwwakTmE0YgIkSnHpBfGCV+gxYh98qKSk5CeTeAxVeQPwUiN8AMSjxgdLNX4AAYkRqCLBAXcMHtVwSaLkMMMHJAvOq9IQJE9R8fHxElJWV1bEF8aNHj+7t27fvLTDlXwXGLyhoH0OD+DnU0k/QYAa1QP8BBBAjWsuSFWo5LzRYxKFYAljqiAHzqxCwIBEwMTERBdZeoOYMA7Bl+RFYEbwB5oS3IA9D4/IFEL+E4nfQ6IDFLTgvAwQQI5ZmLRtSsINSuyA0uwlBUyQPMPWD20/AKo8ByP4DTJTfgRgUjB+gFoEc8R6amGDB+wu5mQsQQIxYmrdMUJ+zQTM6NzQEeKGO4UJqOzFADQMZ/A1qCSzBfQXi71ALfyM17sEAIIAY8fQiWKAYFgIwzIbWTv4HjbdfUAf8RPLhH1icojfoAQKIEU8bG9kRyF0aRiz6YP0k5C4LsmUY9TtAADEyEA+IVfufGEUAAQYABejinPr4dLEAAAAASUVORK5CYII=") no-repeat 0 0; } .modal-spinner { display: none; width: 64px; height: 64px; position: fixed; top: 50%; left: 50%; margin-right: -32px; margin-top: -32px; background: url("data:image/gif;base64,R0lGODlhIAAgAPMAABEREf///0VFRYKCglRUVG5ubsvLy62trTQ0NCkpKU5OTuLi4vr6+gAAAAAAAAAAACH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ/V/nmOM82XiHRLYKhKP1oZmADdEAAAh+QQACgABACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY/CZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB+A4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6+Ho7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq+B6QDtuetcaBPnW6+O7wDHpIiK9SaVK5GgV543tzjgGcghAgAh+QQACgACACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK++G+w48edZPK+M6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkEAAoAAwAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE+G+cD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm+FNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk+aV+oJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkEAAoABAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0/VNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAAKAAUALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc+XiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAAKAAYALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30/iI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE/jiuL04RGEBgwWhShRgQExHBAAh+QQACgAHACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR+ipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAAKAAgALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAAKAAkALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY+Yip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd+MFCN6HAAIKgNggY0KtEBAAh+QQACgAKACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1+vsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d+jYUqfAhhykOFwJWiAAAIfkEAAoACwAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg+ygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0+bm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h+Kr0SJ8MFihpNbx+4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX+BP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA==") #111 no-repeat center center; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; } /* 드래그 앤 드랍 */ /** * The dndDraggingSource class will be applied to * the source element of a drag operation. It makes * sense to hide it to give the user the feeling * that he's actually moving it. */ .dndDraggingSource { display: none; } /** * An element with .dndPlaceholder class will be * added to the dnd-list while the user is dragging * over it. */ .dndPlaceholder { background-color: #ddd; display: block; min-height: 42px; } input::-webkit-input-placeholder { color: #D5D5D5; } input:-ms-input-placeholder { color: #D5D5D5; } /* 주석 */ .annotation { display: block; color: #d43f3b; line-height: 22px; padding: 4px 0; width: 96% } .annotation-inline { display: inline; color: #d43f3b; margin-left: 30px; }