/* 회원관련 */ #member { background-image:url('../img/sub/bg_login.png'); background-size:cover; background-repeat:no-repeat; background-position:center; min-height: 100vh; min-height: 100dvh; min-height: var(--vh); } #member .banner { background-color:rgba(77, 41, 178, 0.3); } #member .banner > div { overflow:hidden; position:relative; } #member .banner > div p { font-size:1.8rem; color:#bcb2e3; font-family:'Montserrat'; padding:2.4rem 16rem 2.4rem 0; } #member .banner > div div { position:absolute; top:50%; right:0; transform:translate(0, -50%); } #member .banner > div div a { font-size:1.6rem; font-weight:700; color:#ffffff; font-family:'Pretendard'; display:inline-block; height:5rem; line-height:5rem; border-radius:2.5rem; background-color:rgba(0, 0, 0, 0.15); padding:0 2.5rem 0 5.5rem; position:relative; } #member .banner > div div a img { position:absolute; top:50%; left:2.5rem; transform:translate(0, -50%); width:2.6rem; } @media screen and (max-width:1440px) { #member .banner > div div { right:20px; } } @media screen and (max-width:1280px) { } @media screen and (max-width:1024px) { #member .banner { display:none; } #member .banner > div div { right:15px; } } @media screen and (max-width:768px) { } @media screen and (max-width:640px) { #member .banner > div div { right:10px; } } #member .content { min-height: 100vh; min-height: 100dvh; min-height: var(--vh); display: flex; align-items: center; justify-content: center; } #member .content .box { padding: 3rem 0; } #member .content .box h1 { display:none; text-align:center; margin:0 0 2.5rem; } #member .content .box h1 a img { width:17rem; vertical-align:top; } #member .content .box .form { position:relative; background-color:#ffffff; padding:5rem; border-radius:2rem; box-shadow:0 0 4.9rem rgba(19, 14, 14, 0.17); } #member .content .box .form.bottom { padding:5rem 5rem 2.5rem; } #member .content .box .form .title { text-align:center; } #member .content .box .form .title p { font-size:3.4rem; color:#373737; font-family:'Montserrat', 'Pretendard'; font-weight:800; } #member .content .box .form .title span { font-size:1.4rem; color:#afafb1; font-family:'Montserrat'; font-weight:500; } #member .content .box .form .input { margin:5rem 0 0; } #member .content .box .form .input .t { color:#3a3b3e; font-size:1.6rem; font-weight:500; padding:0; margin:2rem 0 0; } #member .content .box .form.margin .input .t { margin:1rem 0 0; } #member .content .box .form .input .t span { color:#dd2924; } #member .content .box .form .input .i { margin:0.8rem 0 0; position:relative; } #member .content .box .form .input .i p.explan { color: #A6A6A6; font-family: 'Pretendard'; font-size: 1.3rem; font-style: normal; font-weight: 400; line-height: 2rem; margin: 0.4rem 0 0; } #member .content .box .form.margin .input .i { margin:0.4rem 0 0; } #member .content .box .form .input .i select , #member .content .box .form .input .i input { width:100%; border:0.1rem solid #cdcdcd; line-height:3.8rem; height:4rem; background-color:#ffffff; box-sizing:border-box; padding:0 1.5rem; color:#262934; font-size:1.4rem; font-family:'Pretendard'; border-radius:0.5rem; } #member .content .box .form .input .i input::placeholder { color:#b5b6ba; font-family:'Montserrat'; } #member .content .box .form .input .i.icon input { padding:0 1.5rem 0 3.5rem; } #member .content .box .form .input .i.icon img { position:absolute; top:50%; left:1rem; transform:translate(0, -50%); width:2rem; } #member .content .box .form .input .i.file { font-size:0; text-align:left; } #member .content .box .form .input .i.file input { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:1px; height:1px; padding:0; margin:0; clip:rect(0 0 0 0); } #member .content .box .form .input .i.file label { display:inline-block; width:calc(100% - 12rem - 0.8rem); border:0.1rem solid #cdcdcd; line-height:3.8rem; height:4rem; background-color:#ffffff; box-sizing:border-box; padding:0 1.5rem; color:#262934; font-size:1.4rem; font-family:'Pretendard'; border-radius:0.5rem; vertical-align:top; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } #member .content .box .form .input .i.file button { width:12rem; margin:0 0 0 0.8rem; display:inline-block; background-color:#f7f7f7; font-size:1.4rem; color:#4838e3; border:0.1rem solid #a7adeb; line-height:3.8rem; border-radius:0.4rem; font-weight:400; vertical-align:top; } #member .content .box .form .input .i.button { font-size:0; text-align:left; } #member .content .box .form .input .i.button input { width:calc(100% - 12rem - 0.8rem); } #member .content .box .form .input .i.button button { width:12rem; margin:0 0 0 0.8rem; display:inline-block; background-color:#f7f7f7; font-size:1.4rem; color:#4838e3; border:0.1rem solid #a7adeb; line-height:3.8rem; border-radius:0.4rem; font-weight:400; } #member .content .box .form .input .i.search { padding:0 5.5rem 0 0; font-family:'Pretendard'; } #member .content .box .form .input .i.search button { position:absolute; top:50%; right:0; transform:translate(0, -50%); width:5rem; border:none; background-color:#4838e3; background-image:url('../img/icon/login_search.png'); height:100%; border-radius:0.5rem; text-align:center; cursor:pointer; font-size:0; background-position:center; background-repeat:no-repeat; background-size:2.8rem; } #member .content .box .form .input .i.tel { font-size:0; } #member .content .box .form .input .i.tel input { width:31%; } #member .content .box .form .input .i.tel span { display:inline-block; text-align:center; color:#545454; font-size:1.5rem; font-weight:200; width:3.5%; } #member .content .box .form .input .i.date { font-size:0; } #member .content .box .form .input .i.date span { display:inline-block; text-align:center; color:#545454; font-size:1.5rem; font-weight:200; } #member .content .box .form .input .i.date2 select { width:48.25%; } #member .content .box .form .input .i.date2 span { width:3.5%; } #member .content .box .form .input .i.date3 select { width:31%; } #member .content .box .form .input .i.date3 span { width:3.5%; } #member .content .box .form .input .i#authInfo { display:none; } #member .content .box .form .input .r { font-size:0; } #member .content .box .form .input .r label { display:inline-block; position:relative; padding:0 2rem; } #member .content .box .form .input .r label span { font-family:'Pretendard'; font-size:1.8rem; color:#6b6d73; font-weight:500; } #member .content .box .form .input .r label input[type=radio] { appearance:none; position:absolute; top:50%; left:0; transform:translate(0, -50%); padding:0; margin:0; border-radius:50%; width:1.6rem; height:1.6rem; border:0.1rem solid #babbbf; background-color:#ffffff; font-size:1.8rem; color:#6b6d73; } #member .content .box .form .input .r label input[type=radio]:checked { appearance:auto; accent-color:#4838e3; } #member .content .box .form .input .r label input[type=radio]:checked + span { color:#3f31cc; } #member .content .box .form .navi { margin:1rem 0 0; overflow:hidden; } #member .content .box .form .navi li { float:right; font-size:1.4rem; color:#4b5dc1; font-weight:500; box-sizing:border-box; font-family:'Montserrat'; } #member .content .box .form .navi li:first-child { float:left; color:#262934; font-family:'Pretendard'; font-weight:400; } #member .content .box .form .navi li label { position:relative; padding:0 0 0 2rem; } #member .content .box .form .navi li label input[type=checkbox] { appearance:none; position:absolute; top:50%; left:0; transform:translate(0, -50%); padding:0; margin:0; border-radius:0.2rem; width:1.4rem; height:1.4rem; border:0.1rem solid #babbbf; } #member .content .box .form .navi li label input[type=checkbox]:checked { appearance:auto; accent-color:#4838e3; } #member .content .box .form .line { height:0.1rem; background-color:#ececec; margin:2rem 0; } #member .content .box .form .or { font-size:1.8rem; color:#989898; font-weight:500; font-family:'Montserrat'; text-align:center; position:relative; margin:1.5rem 0; } #member .content .box .form .or:before , #member .content .box .form .or:after { content:''; position:absolute; top:50%; transform:translate(0, -50%); background-color:#ececec; height:0.1rem; width:42.5%; } #member .content .box .form .or:before { left:0; } #member .content .box .form .or:after { right:0; } #member .content .box .form .sns { overflow:hidden; } #member .content .box .form .sns ul { overflow:hidden; margin:-1%; } #member .content .box .form .sns ul li { float:left; width:48%; margin:1%; } #member .content .box .form .sns ul li a { display:block; border:0.1rem solid #cdcdcd; border-radius:0.8rem; text-align:center; } #member .content .box .form .sns ul li a span { display:inline-block; position:relative; line-height:4.8rem; color:#373737; font-family:'Montserrat'; font-size:1.6rem; font-weight:700; padding:0 0 0 3rem; } #member .content .box .form .sns ul li a span img { position:absolute; top:50%; left:0; transform:translate(0, -50%); width:2.4rem; } #member .content .box .form .join { text-align:center; font-family:'Pretendard'; font-size:1.6rem; color:#6b6d74; } #member .content .box .form .join.mt80 { margin:8rem 0 0; } #member .content .box .form .join.mt25 { margin:2.5rem 0 0; } #member .content .box .form .join a { color:#4b5dc1; font-weight:700; text-decoration:underline; text-underline-position:under; } #member .content .box .form .policy { margin:4.5rem 0 0; text-align:center; font-size:0; } #member .content .box .form .policy a , #member .content .box .form .policy button { display:inline-block; border:none; background:none; vertical-align:top; color:#6b6d74; font-weight:inherit; cursor:pointer; font-size:1.4rem; font-family:'Pretendard'; padding:0 1rem; position:relative; } #member .content .box .form .policy a:before , #member .content .box .form .policy button:before { content:''; position:absolute; top:50%; left:0.05rem; width:0.1rem; height:70%; transform:translate(0, -50%); background-color:#6b6d74; } #member .content .box .form .policy button:first-child:before { content:none; } #member .content .box .form .info { text-align:center; margin:2rem 0 0; border-radius:0.8rem; background-color:#f7f7f7; border:0.1rem solid #eeeeee; } #member .content .box .form .info p { font-size:1.6rem; color:#373737; margin:3rem 0; font-family:'Pretendard'; } #member .content .box .form .info p strong { display:block; font-weight:700; font-size:2rem; color:#4838e3; font-family:'Montserrat', 'Pretendard'; margin:0.5rem 0 0; } #member .content .box .form .text { text-align:center; margin:2rem 0 0; border-radius:0.8rem; background-color:#f7f7f7; border:0.1rem solid #eeeeee; } #member .content .box .form .text p { font-size:1.6rem; color:#373737; margin:3rem 0; font-family:'Pretendard'; } #member .content .box .form .text p strong { display:block; font-weight:600; font-family:'Montserrat', 'Pretendard'; margin:0.5rem 0 0; } #member .content .box .form .guide { margin:5rem 0 0; font-size:1.6rem; color:#373737; font-family:'Pretendard'; font-weight:400; line-height:2.6rem; } #member .content .box .form .agree { margin:2rem 0 0; } #member .content .box .form.margin .agree { margin:1rem 0 0; } #member .content .box .form .agree li { font-size:1.4rem; color:#262934; line-height:2.4rem; margin:0.5rem 0; } #member .content .box .form .agree li label { position:relative; padding:0 0 0 2rem; } #member .content .box .form .agree li label input[type=checkbox] { appearance:none; position:absolute; top:50%; left:0; transform:translate(0, -50%); padding:0; margin:0; border-radius:0.2rem; width:1.4rem; height:1.4rem; border:0.1rem solid #babbbf; } #member .content .box .form .agree li label input[type=checkbox]:checked { appearance:auto; accent-color:#4838e3; } #member .content .box .form .agree li button { line-height:inherit; vertical-align:top; font-size:1.2rem; color:#454649; background-color:#e8e9ec; border:none; padding:0 1rem; border-radius:0.2rem; } #member .content .box .form .button { text-align:center; margin:4.5rem 0 0; } #member .content .box .form .button a , #member .content .box .form .button button { background-color:#4838e3; color:#ffffff; font-family:'Montserrat'; font-size:1.8rem; font-weight:700; border:none; margin:0; padding:0; width:100%; line-height:5rem; border-radius:0.8rem; display:block; } #member .content .box .form .company { margin:2.5rem 0 0; overflow-y:scroll; max-height:20rem; -ms-overflow-style:none; } #member .content .box .form .company::-webkit-scrollbar { display:none; } #member .content .box .form .company label { display:block; position:relative; padding:0 0 0 4rem; border:0.1rem solid #eeeeee; border-radius:0.8rem; background-color:#f7f7f7; line-height:4.8rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin:1rem 0; } #member .content .box .form .company label:last-child, #member .content .box .form .company label:first-child { margin:0; } #member .content .box .form .company label input[type=radio] { appearance:none; position:absolute; top:50%; left:1.5rem; transform:translate(0, -50%); padding:0; margin:0; border-radius:50%; width:1.6rem; height:1.6rem; border:0.1rem solid #babbbf; background-color:#ffffff; } #member .content .box .form .company label input[type=radio]:checked { appearance:auto; accent-color:#4838e3; } #member .content .box .form .company label span { font-family:'Montserrat', 'Pretendard'; font-size:1.6rem; font-weight:700; color:#373737; } @media screen and (max-width:1440px) { #member .content .box .form { padding:4.5rem; } #member .content .box .form.bottom { padding:4.5rem 4.5rem 2.5rem; } } @media screen and (max-width:1280px) { #member .content .box .form { padding:4rem; } #member .content .box .form.bottom { padding:4rem 4rem 2.5rem; } } @media screen and (max-width:1024px) { #member .content .box .form { padding:3.5rem; } #member .content .box .form.bottom { padding:3.5rem 3.5rem 2.5rem; } } @media screen and (max-width:768px) { #member .content .box .form { padding:3rem; } #member .content .box .form.bottom { padding:3rem 3rem 2.5rem; } } @media screen and (max-width:640px) { #member .content .box .form { padding:2.5rem; } #member .content .box .form.bottom { padding:2.5rem 2.5rem 2.5rem; } } /* 페이징 */ .pagination { display: flex; justify-content: center; align-items: center; gap: .5rem; margin: 4rem 0 2rem; } .pagination .page-item { font-size: 0; } .pagination .page-item > a { display: block; padding: 0.5rem 1rem; font-size: 1.4rem; min-width: 1.3rem; line-height: 1.3rem; text-align: center; box-sizing: content-box; border-radius: 0.8rem; } .pagination .page-item > a:not(:has(i.icon)) { padding: 1rem; border: 1px solid #d8d8e4; color: #575757; } .pagination .page-item.active > a:not(:has(i.icon)) { background-color: var(--main-color); color: #fff; font-weight: 700; } .pagination .page-item > a > i.icon { width: 2.5rem; height: 2.5rem; color: #575757; } @media screen and (max-width:1440px) { } @media screen and (max-width:1280px) { } @media screen and (max-width:1024px) { } @media screen and (max-width:768px) { } @media screen and (max-width:640px) { } /* 사내일정 */ .calendar .head { overflow:hidden; box-sizing:border-box; border:1px solid #DDD; border-radius: 1rem 1rem 0 0; } .calendar .head div { float:left; width:14.285%; text-align:center; box-sizing:border-box; padding:1.2rem 0; color: #333; font-family: 'Pretendard'; font-size: 1.5rem; font-style: normal; font-weight: 600; letter-spacing: -0.03rem; border-left:1px solid #DDD; background-color:#ffffff; border-right:none; } .calendar .head div:first-child { border-left:0; } .calendar .head .sat , .calendar .head .sun { background-color:#F5F5F5; } .calendar .head .sat { color:#004CFF; } .calendar .head .sun { color:#ff0000; } .calendar .body { border-right:1px solid #DDD; box-sizing:border-box; border-left:1px solid #DDD; font-size:1.3rem; font-weight: 400; border-radius: 0 0 1rem 1rem; } .calendar .body .day { position:relative; } .calendar .body .day:last-child div:first-child { border-radius: 0 0 0 1rem; } .calendar .body .day:last-child div:last-child { border-radius: 0 0 1rem 0; } .calendar .body .day:after { display:block; clear:both; content:''; } .calendar .body .day div { height:14rem; padding:1rem 0; float:left; width:14.285%;; text-align:center; box-sizing:border-box; border-bottom:1px solid #DDD; border-left:1px solid #DDD; } .calendar .body .day div:first-child { border-left:0; } .calendar .body .day div.sat , .calendar .body .day div.sun { background-color:#F5F5F5; } .calendar .body .day div.now { background-color:#EAE4F8; } .calendar .body .day div.sat span { color: #222; font-family: 'Pretendard'; font-size: 1.3rem; font-style: normal; font-weight: 400; letter-spacing: -0.026rem; } .calendar .body .day div.sat span { color:#0000ff; } .calendar .body .day div.sun span { color:#ff0000; } .calendar .body .day div.now span { font-weight:600; color: #7F40FF; } .calendar .body .day div ol { text-align:left; } .calendar .body .day div ol li { position:absolute; top:3.5rem; background-color:#e5e5e5; border-radius:1.5rem; color:#ffffff; } .calendar .body .day div ol li a { display:block; white-space:nowrap; width:100%; overflow:hidden; text-overflow:ellipsis; line-height:2rem; padding:0 1em; } .calendar .body .day div ol li p { display:none; position:absolute; left:50%; transform:translate(-50%, 0); bottom:150%; background-color:#ffffff; border-radius:0.5rem; z-index:2; float:none; width:auto; box-shadow:0 0 2.7rem 0.4rem rgba(0, 0, 0, 0.2); padding:1rem; } .calendar .body .day div ol li p:after { border-top:0.8rem solid #ffffff; border-left:0.8rem solid transparent; border-right:0.8rem solid transparent; border-bottom:0px solid transparent; content:''; position:absolute; top:100%; left:50%; transform:translate(-50%, 0); z-index:1; filter:drop-shadow(0 0 2.7rem 0.4rem rgba(0, 0, 0, 0.2)); } .calendar .body .day div ol li p a { color:#000000; } .calendar .body .day div ol li.line2 { top:5.8rem; } .calendar .body .day div ol li.line3 { top:8.1rem; } .calendar .body .day div ol li.day1 { width:calc(14.28% - 2rem); } .calendar .body .day div ol li.day2 { width:calc(28.56% - 2rem); } .calendar .body .day div ol li.day3 { width:calc(42.84% - 2rem); } .calendar .body .day div ol li.day4 { width:calc(57.12% - 2rem); } .calendar .body .day div ol li.day5 { width:calc(71.4% - 2rem); } .calendar .body .day div ol li.day6 { width:calc(85.68% - 2rem); } .calendar .body .day div ol li.day7 { width:calc(99.96% - 2rem); } .calendar .body .day div ol li.more { top:auto; bottom:1rem; box-sizing:border-box; background-color:transparent; color:#000000; width:calc(14.28% - 2rem); text-align:center; font-size:1.1rem; } .calendar .body .day div ol li.more i { font-style:normal; color:var(--main-color); } .calendar .body .day div ol li.green { background-color:#62ac9d; } .calendar .body .day div ol li.blue { background-color:#6687ff; } .calendar .body .day div ol li.red { background-color:#ff0000; } .calendar .body .day div ol li.orange { background-color:#f4800b; } .calendar .body .day div ol li.gray { background-color:#5c5c5c; } .calendar .body .day div ol li.purple { background-color:#915ce0; } .calendar .body .day div ol li.yellow { background-color:#edbc40; } .calendar .body .day div ol li.width1 { width:calc(14.28% - 1rem); } .calendar .body .day div ol li.width2 { width:calc(28.56% - 1rem); } .calendar .body .day div ol li.width3 { width:calc(42.84% - 1rem); } .calendar .body .day div ol li.width4 { width:calc(57.12% - 1rem); } .calendar .body .day div ol li.width5 { width:calc(71.4% - 1rem); } .calendar .body .day div ol li.width6 { width:calc(85.68% - 1rem); } .calendar .body .day div ol li.width7 { width:calc(99.96% - 1rem); } .calendar .body .day div ol li.sun { left:0.5rem; } .calendar .body .day div ol li.mon { left:calc(14.28% + 0.5rem); } .calendar .body .day div ol li.tue { left:calc(28.56% + 0.5rem); } .calendar .body .day div ol li.wed { left:calc(42.84% + 0.5rem); } .calendar .body .day div ol li.thu { left:calc(57.12% + 0.5rem); } .calendar .body .day div ol li.fri { left:calc(71.4% + 0.5rem); } .calendar .body .day div ol li.sat { left:calc(85.68% + 0.5rem); } .calendar .body .day div ol li.first.sun { left:0; border-radius:0 1.5rem 1.5rem 0; } .calendar .body .day div ol li.first.mon { left:calc(14.28%); border-radius:0 1.5rem 1.5rem 0; } .calendar .body .day div ol li.first.tue { left:calc(28.56%); border-radius:0 1.5rem 1.5rem 0; } .calendar .body .day div ol li.first.wed { left:calc(42.84%); border-radius:0 1.5rem 1.5rem 0; } .calendar .body .day div ol li.first.thu { left:calc(57.12%); border-radius:0 1.5rem 1.5rem 0; } .calendar .body .day div ol li.first.fri { left:calc(71.4%); border-radius:0 1.5rem 1.5rem 0; } .calendar .body .day div ol li.first.sat { left:calc(85.68%); border-radius:0 1.5rem 1.5rem 0; } .calendar .body .day div ol li.first.width1 { width:calc(14.28% - 0.5rem); } .calendar .body .day div ol li.first.width2 { width:calc(28.56% - 0.5rem); } .calendar .body .day div ol li.first.width3 { width:calc(42.84% - 0.5rem); } .calendar .body .day div ol li.first.width4 { width:calc(57.12% - 0.5rem); } .calendar .body .day div ol li.first.width5 { width:calc(71.4% - 0.5rem); } .calendar .body .day div ol li.first.width6 { width:calc(85.68% - 0.5rem); } .calendar .body .day div ol li.first.width7 { width:calc(99.96% - 0.5rem); } .calendar .body .day div ol li.last.width1 { width:calc(14.28% - 0.5rem); border-radius:1.5rem 0 0 1.5rem; } .calendar .body .day div ol li.last.width2 { width:calc(28.56% - 0.5rem); border-radius:1.5rem 0 0 1.5rem; } .calendar .body .day div ol li.last.width3 { width:calc(42.84% - 0.5rem); border-radius:1.5rem 0 0 1.5rem; } .calendar .body .day div ol li.last.width4 { width:calc(57.12% - 0.5rem); border-radius:1.5rem 0 0 1.5rem; } .calendar .body .day div ol li.last.width5 { width:calc(71.4% - 0.5rem); border-radius:1.5rem 0 0 1.5rem; } .calendar .body .day div ol li.last.width6 { width:calc(85.68% - 0.5rem); border-radius:1.5rem 0 0 1.5rem; } .calendar .body .day div ol li.last.width7 { width:calc(99.96% - 0.5rem); border-radius:1.5rem 0 0 1.5rem; } .calendar .body .day div ol li.ing.width1 { width:calc(14.28%); border-radius:0; } .calendar .body .day div ol li.ing.width2 { width:calc(28.56%); border-radius:0; } .calendar .body .day div ol li.ing.width3 { width:calc(42.84%); border-radius:0; } .calendar .body .day div ol li.ing.width4 { width:calc(57.12%); border-radius:0; } .calendar .body .day div ol li.ing.width5 { width:calc(71.4%); border-radius:0; } .calendar .body .day div ol li.ing.width6 { width:calc(85.68%); border-radius:0; } .calendar .body .day div ol li.ing.width7 { width:calc(99.96%); border-radius:0; } @media screen and (max-width:1440px) { } @media screen and (max-width:1280px) { } @media screen and (max-width:1024px) { } @media screen and (max-width:768px) { } @media screen and (max-width:640px) { } /* 목록 */ table.table-style-01 { table-layout: fixed; border-collapse: separate; border-spacing: 0.7rem; } table.table-style-01 thead tr th { background-color: #ffffff; border: 1px solid #d8d8e4; font-size: 1.4rem; font-weight: 600; color: #575757; padding: 1.6rem 0.6rem; border-radius: 0.8rem; word-break: break-all; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; position: relative; } table.table-style-01 thead tr th.th_left { text-align: left; padding-left: 1.6rem; } table.table-style-01 thead tr th.sorting { cursor: pointer; } table.table-style-01 thead tr th.sorting:before { position: absolute; top: 50%; transform: translate(0, -50%); right: 1rem; font-size: 1rem; } table.table-style-01 thead tr th.sorting.desc:before { content: "▼"; } table.table-style-01 thead tr th.sorting.asc:before { content: "▲"; } table.table-style-01 tbody tr { background-color: #fff; flex-direction: unset !important; } table.table-style-01 tbody tr td { background-color: #FAFAFA; padding: 1.6rem 0.8rem !important; font-size: 1.5rem; font-weight: 400; color: #000; text-align: center; word-break: break-all; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; border-radius: 0.8rem; line-height: 2.2rem; position: relative; } table.table-style-01 tbody tr td.full { word-break: normal; white-space: unset; } table.table-style-01 tbody tr td.td_left { text-align: left; padding-left: 1.6rem; } table.table-style-01 tbody tr td.h-px-200 { line-height: 20rem; } table.table-style-01 tbody tr td .color-red { color: #ED3309; font-weight: 600; } table.table-style-01 tbody tr td .color-yellow { color: #f1c40f; font-weight: 600; } table.table-style-01 tbody tr td .color-green { color: #1FA316; font-weight: 600; } table.table-style-01 tbody tr td .color-blue { color: #3498db; font-weight: 600; } table.table-style-01 tbody tr td .color-gray { color: #616161; font-weight: 600; } table.table-style-01 tbody tr td .status-bar { position: absolute; top: 0; left: 0; width: 0.4rem; height: 100%; } table.table-style-01 tbody tr td .status-bar.red { background-color: #ED3309; } table.table-style-01 tbody tr td .status-bar.yellow { background-color: #f1c40f; } table.table-style-01 tbody tr td .status-bar.green { background-color: #1FA316; } table.table-style-01 tbody tr td .status-bar.blue { background-color: #3498db; } table.table-style-01 tbody tr td .status-bar.gray { background-color: #616161; } table.table-style-01 tbody tr td textarea { width: 100%; min-height: 5rem; border: 1px solid #d8d8e4; resize: none; border-radius: 0.8rem; vertical-align: top; padding: 0.5rem; } table.table-style-01 tbody tr td select , table.table-style-01 tbody tr td input[type=text] { width: 100%;border: 1px solid #d8d8e4; border-radius: 0.8rem; vertical-align: top; padding: 0.5rem; background-color: #FFF; } table.table-style-01 tbody tr td picture { } table.table-style-01 tbody tr td picture button { background-size: cover; background-repeat: no-repeat; width: 3.1rem; height: 3.1rem; border: none; margin: 0; background-color: transparent; background-position: center; vertical-align: top; } table.table-style-01 tbody tr.emphasize td { font-weight: bold; } table.table-style-01 tbody tr.bg-warning td { background-color: #ffeecc; } table.table-style-01 tbody tr.bg-danger td { background-color: #ffd8d2; } @media screen and (max-width:1440px) { } @media screen and (max-width:1280px) { } @media screen and (max-width:1024px) { } @media screen and (max-width:768px) { table.table-style-01 { display: block; width: 100%; border-spacing: 0; } table.table-style-01 colgroup { display: none; } table.table-style-01 thead { display: none; } table.table-style-01 tbody { display: block; width: 100%; margin-top: -1.6rem; } table.table-style-01 tbody tr { display: flex; flex-wrap: wrap; border: 1px solid #d8d8e4; gap: 0.7rem; padding: 0.7rem; margin: 1.6rem 0; border-radius: 0.8rem; } table.table-style-01 tbody tr td { --span: 1; width: calc( ( (100% - (0.7rem * (var(--mobile-col) - 1))) / var(--mobile-col) ) * var(--span) + (0.7rem * (var(--span) - 1)) ); display: block; flex-direction: column; text-align: left; box-sizing: border-box; } table.table-style-01 tbody tr td.mobile_two { --span: 2; } table.table-style-01 tbody tr td.mobile_three { --span: 3; } table.table-style-01 tbody tr td:before { display: block; content: attr(data-label); font-size: 1.4rem; font-weight: 600; color: #575757; padding: 0 0 0.7rem; } table.table-style-01 tbody tr td:not([data-label]):before , table.table-style-01 tbody tr td[data-label=""]:before { padding: 0; } table.table-style-01 tbody tr td.h-px-200 { width: 100%; text-align: center; } table.table-style-01 tbody tr td:has(input[type="checkbox"]) { display: none; } table.table-style-01 tbody tr td.td_num { display: none; } } @media screen and (max-width:640px) { } /* 목록 */ .gantt-table { --gantt-font-size: 1.4rem; --gantt-font-size-large: 1.8rem; --gantt-border-color: #EEE; --gantt-header-row: 2; --gantt-header-box-size: 3rem; --gantt-body-box-size-large: 5rem; --gantt-body-box-size: 4rem; } .gantt-table { border:0.1rem solid var(--gantt-border-color); border-radius: 1rem; overflow: hidden; font-size: var(--gantt-font-size); font-family: 'Pretendard'; } .gantt-table table tbody tr td { padding: 0; vertical-align: top; } .gantt-table table tbody tr td .saturday { background-color: #EDFAFF !important; } .gantt-table table tbody tr td .sunday { background-color: #FFEFEC !important; } .gantt-table table tbody tr td .holiday { background-color: #FFEFEC !important; } .gantt-table table tbody tr td .today { } /* 업무명 */ .gantt-table table tbody tr td.gantt-project-col { width: min(30rem, 60vw); transition: all 0.25s ease; } .gantt-table table tbody tr td header.gantt-project-header { text-align: center; line-height: calc(var(--gantt-header-box-size) * var(--gantt-header-row) - 0.1rem); border-bottom: 0.1rem solid var(--gantt-border-color); border-right: 0.1rem solid var(--gantt-border-color); background-color: #fff; } .gantt-table table tbody tr td header.gantt-project-header > span { font-weight: 600; color: #646464; } .gantt-table table tbody tr td section.gantt-project-body { background-color: #FAFAFA; position: relative; } .gantt-table table tbody tr td section.gantt-project-body h3.project-subject { font-size: 1.8rem; font-weight: 600; color: #222; line-height: var(--gantt-body-box-size-large); height: var(--gantt-body-box-size-large); border-bottom: 0.1rem solid var(--gantt-border-color); border-right: 0.1rem solid var(--gantt-border-color); cursor: pointer; position: relative; padding-left: var(--gantt-body-box-size); } .gantt-table table tbody tr td section.gantt-project-body h3.project-subject:after { content: ''; position: absolute; top: 0; left: 0; width: 0.5rem; height: 100%; background-color: var(--main-color); } .gantt-table table tbody tr td section.gantt-project-body h3.project-subject button { position: absolute; top: 50%; left: 0; border: none; background: none; cursor: pointer; width: var(--gantt-body-box-size); height: var(--gantt-body-box-size); transform: translate(0, -50%); } .gantt-table table tbody tr td section.gantt-project-body h3.project-subject button img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1.2rem; } .gantt-table table tbody tr td section.gantt-project-body h3.project-subject.active button img { transform: translate(-50%, -50%) rotate(-180deg); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject { display: block; color: #555; line-height: var(--gantt-body-box-size); height: var(--gantt-body-box-size); padding-left: var(--gantt-body-box-size); border-bottom: 0.1rem solid var(--gantt-border-color); border-right: 0.1rem solid var(--gantt-border-color); position: relative; font-weight: 300; background-color: transparent; border-bottom-color: #FAFAFA; } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.top { color: #444; font-weight: 500; border-bottom-color: var(--gantt-border-color); background-color: #fff; } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.last { border-bottom-color: var(--gantt-border-color); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.color-red { color: #e74c3c; font-weight: 600; } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject:hover { text-decoration: underline; text-underline-position : under; } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject button { position: absolute; top: 50%; left: 0; border: none; background: none; cursor: pointer; width: var(--gantt-body-box-size); height: var(--gantt-body-box-size); transform: translate(0, -50%); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject button img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; width: 1.3rem; } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject button img.minus { display: block; } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.active button img.plus { display: block; } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject .line { position: absolute; top: 0; left: calc(var(--gantt-body-box-size) / 2); bottom: 0; width: 0.1rem; background-color: #E0E0E0; } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject .line.first { top: 1.2rem; } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject .line.last { bottom: 1.2rem; } .gantt-table table tbody tr td section.gantt-project-body .project-work-button { position: absolute; left: 100%; top: 0; writing-mode: vertical-rl; border-radius: 0 0.8rem 0.8rem 0; background: #2F2F2F; padding: 0.8rem 0.6rem 2.5rem 0.6rem; color: #FFF; font-family: 'Pretendard'; font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: normal; z-index: 10; will-change: transform; transition: transform 0.14s ease-out; } .gantt-table table tbody tr td section.gantt-project-body .project-work-button img { position: absolute; bottom: 0.8rem; left: 50%; transform: translate(-50%, 0); width: 0.9rem; transition: all 0.25s ease; } .gantt-table table tbody tr td section.gantt-project-body .project-work-button::before { content: 'open'; } .gantt-table.is-open table tbody tr td.gantt-project-col { width: min(75rem, 60vw); } .gantt-table.is-open table tbody tr td section.gantt-project-body .project-work-button img { transform: translate(-50%, 0) rotate(180deg); } .gantt-table.is-open table tbody tr td section.gantt-project-body .project-work-button::before { content: 'close'; } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject .line1 { left: calc((var(--gantt-body-box-size) / 2)); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject .line2 { left: calc((var(--gantt-body-box-size) / 2) + var(--gantt-body-box-size) * 0.5); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject .line3 { left: calc((var(--gantt-body-box-size) / 2) + var(--gantt-body-box-size) * 1); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject .line4 { left: calc((var(--gantt-body-box-size) / 2) + var(--gantt-body-box-size) * 1.5); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject .line5 { left: calc((var(--gantt-body-box-size) / 2) + var(--gantt-body-box-size) * 2); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject .line6 { left: calc((var(--gantt-body-box-size) / 2) + var(--gantt-body-box-size) * 2.5); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject .line7 { left: calc((var(--gantt-body-box-size) / 2) + var(--gantt-body-box-size) * 3); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject .line8 { left: calc((var(--gantt-body-box-size) / 2) + var(--gantt-body-box-size) * 3.5); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject .line9 { left: calc((var(--gantt-body-box-size) / 2) + var(--gantt-body-box-size) * 4); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.depth1 { padding-left: var(--gantt-body-box-size); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.depth2 { padding-left: calc(var(--gantt-body-box-size) * 1); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.depth3 { padding-left: calc(var(--gantt-body-box-size) * 1.5); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.depth4 { padding-left: calc(var(--gantt-body-box-size) * 2); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.depth5 { padding-left: calc(var(--gantt-body-box-size) * 2.5); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.depth6 { padding-left: calc(var(--gantt-body-box-size) * 3); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.depth7 { padding-left: calc(var(--gantt-body-box-size) * 3.5); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.depth8 { padding-left: calc(var(--gantt-body-box-size) * 4); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.depth9 { padding-left: calc(var(--gantt-body-box-size) * 4.5); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.depth1 button { left: 0; } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.depth2 button { left: 0; } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.depth3 button { left: calc((var(--gantt-body-box-size) / 2)); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.depth4 button { left: calc((var(--gantt-body-box-size) / 2) + var(--gantt-body-box-size) * 0.5); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.depth5 button { left: calc((var(--gantt-body-box-size) / 2) + var(--gantt-body-box-size) * 1); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.depth6 button { left: calc((var(--gantt-body-box-size) / 2) + var(--gantt-body-box-size) * 1.5); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.depth7 button { left: calc((var(--gantt-body-box-size) / 2) + var(--gantt-body-box-size) * 2); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.depth8 button { left: calc((var(--gantt-body-box-size) / 2) + var(--gantt-body-box-size) * 2.5); } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject.depth9 button { left: calc((var(--gantt-body-box-size) / 2) + var(--gantt-body-box-size) * 3); } /* 차트 */ .gantt-table table tbody tr td.gantt-chart-col { overflow: auto; } .gantt-table table tbody tr td header.gantt-chart-header { display: flex; flex-direction: column; } .gantt-table table tbody tr td header.gantt-chart-header .gantt-chart-header-Ym-wrap { display: flex; } .gantt-table table tbody tr td header.gantt-chart-header .gantt-chart-header-Ym-wrap > * { flex-shrink: 0; font-size: var(--gantt-font-size); font-weight: 600; color: #646464; width: calc(var(--gantt-header-box-size) * var(--month-days)); height: var(--gantt-header-box-size); line-height: var(--gantt-header-box-size); text-align: center; white-space: nowrap; border: 0.1rem solid var(--gantt-border-color); border-top: 0; border-left: 0; background-color: #fff; } .gantt-table table tbody tr td header.gantt-chart-header .gantt-chart-header-Ym-wrap > *:last-child { border-right: 0; } .gantt-table table tbody tr td header.gantt-chart-header .gantt-chart-header-d-wrap { display: flex; } .gantt-table table tbody tr td header.gantt-chart-header .gantt-chart-header-d-wrap > * { flex-shrink: 0; font-family: 'Montserrat'; font-size: var(--gantt-font-size); font-weight: 400; color: #646464; width: var(--gantt-header-box-size); height: var(--gantt-header-box-size); line-height: var(--gantt-header-box-size); text-align: center; white-space: nowrap; border: 0.1rem solid var(--gantt-border-color); border-top: 0; border-left: 0; background-color: #fff; } .gantt-table table tbody tr td header.gantt-chart-header .gantt-chart-header-d-wrap > *:last-child { border-right: 0; } .gantt-table table tbody tr td header.gantt-chart-header .gantt-chart-header-d-wrap > .today { background-color: var(--main-color) !important; border-right-color: var(--main-color); color: #fff !important; } .gantt-table table tbody tr td header.gantt-chart-header .gantt-chart-header-w-wrap { display: flex; } .gantt-table table tbody tr td header.gantt-chart-header .gantt-chart-header-w-wrap > * { flex-shrink: 0; font-size: var(--gantt-font-size); font-weight: 400; width: var(--gantt-header-box-size); height: var(--gantt-header-box-size); line-height: var(--gantt-header-box-size); text-align: center; white-space: nowrap; border: 0.1rem solid var(--gantt-border-color); border-top: 0; border-left: 0; background-color: #fff; } .gantt-table table tbody tr td section.gantt-chart-body { } .gantt-table table tbody tr td section.gantt-chart-body .gantt-chart-body-box-row { position: relative; display: flex; white-space: nowrap; } .gantt-table table tbody tr td section.gantt-chart-body .gantt-chart-body-box { position: relative; flex-shrink: 0; display: flex; justify-content: center; align-items: center; font-size: var(--gantt-font-size); width: var(--gantt-header-box-size); height: var(--gantt-body-box-size); text-align: center; white-space: nowrap; border: 0.1rem solid var(--gantt-border-color); border-top: 0; border-left: 0; border-right: 0; background-color: #fcfbfe; } .gantt-table table tbody tr td section.gantt-chart-body .gantt-chart-body-box.today::before { content: ""; position: absolute; top: -0.1rem; left: 50%; transform: translateX(-50%); display: block; width: .1rem; height: calc(100% + 0.1rem); background-color: var(--main-color); z-index: 2; } .gantt-table table tbody tr td section.gantt-chart-body .project-work-subject .gantt-chart-body-box { height: var(--gantt-body-box-size-large); background-color: #fff; } .gantt-table table tbody tr td section.gantt-chart-body .gantt-chart-bar-wrap { position: absolute; top: 50%; left: calc(var(--gantt-header-box-size) * var(--start-point)); width: calc(var(--gantt-header-box-size) * (var(--end-point) - var(--start-point)) - 0.1rem); height: calc(var(--gantt-body-box-size) * .5); margin-top:calc((var(--gantt-body-box-size) * .25) * -1); } .gantt-table table tbody tr td section.gantt-chart-body .gantt-chart-bar-overed { position: absolute; top: 50%; left: calc(var(--gantt-header-box-size) * var(--start-point) - 0.1rem); width: calc(var(--gantt-header-box-size) * (var(--end-point) - var(--start-point))); height: calc(var(--gantt-body-box-size) * .5); margin-top:calc((var(--gantt-body-box-size) * .25) * -1); background: url(../img/sub/overed_pattern.png) repeat; opacity: .3; z-index:1; border-radius: 0 0.5rem 0.5rem 0; } .gantt-table table tbody tr td section.gantt-chart-body .gantt-chart-bar-wrap a.gantt-chart-bar , .gantt-table table tbody tr td section.gantt-chart-body .gantt-chart-bar-wrap a.gantt-chart-bar:before { position: absolute; top: 0; left: 0; height: 100%; border-radius: 0.5rem; } .gantt-table table tbody tr td section.gantt-chart-body .gantt-chart-bar-wrap a.gantt-chart-bar { display: block; width: 100%; background: #C4C4C4; opacity: .9; transition: all 0.2s; } .gantt-table table tbody tr td section.gantt-chart-body .gantt-chart-bar-wrap a.gantt-chart-bar:before { content:''; width: calc(var(--progress) * 1%); background: var(--status-color); } .gantt-table table tbody tr td section.gantt-chart-body .gantt-chart-bar-wrap.square a.gantt-chart-bar , .gantt-table table tbody tr td section.gantt-chart-body .gantt-chart-bar-wrap.square a.gantt-chart-bar:before { border-radius: 0.5rem 0 0 0.5rem; } .gantt-table table tbody tr td section.gantt-chart-body .gantt-chart-bar-wrap a.gantt-chart-bar:hover { opacity: .8; } .gantt-table table tbody tr td section.gantt-chart-body .gantt-chart-bar-wrap .gantt-chart-work-info { position: absolute; top: 50%; left: 100%; transform: translateY(-50%); padding: 0 0.5rem; z-index: 5; } .gantt-table table tbody tr td section.gantt-chart-body .gantt-chart-bar-wrap .gantt-chart-work-info span { font-size: var(--gantt-font-size); color: #000000; font-weight: 200; } #gantt-tooltip { pointer-events: none; } .gantt-chart-bar-popup { display: none; } #gantt-tooltip.gantt-chart-bar-popup { position: absolute; top: 105%; left: 0; width: 35rem; max-width: 80vw; background-color: #ffffff; z-index: 10; border: 0.1rem solid #eee; z-index: 99999; padding: 2rem 2rem 2rem 3rem; box-shadow: 0.5rem 0.5rem 2rem 0 rgba(118, 118, 118, 0.25); border-radius: 0 2rem 2rem 2rem; } #gantt-tooltip.gantt-chart-bar-popup::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 4rem solid var(--status-color, #bdbdbd); border-right: 4rem solid transparent; } #gantt-tooltip.gantt-chart-bar-popup p { color: #000; font-size: 1.7rem; font-weight: 600; } #gantt-tooltip.gantt-chart-bar-popup table { margin: 1rem 0 0; } #gantt-tooltip.gantt-chart-bar-popup table tbody tr th , #gantt-tooltip.gantt-chart-bar-popup table tbody tr td { text-align: left; line-height: 153.846%; border: none; color: #222; } #gantt-tooltip.gantt-chart-bar-popup table tbody tr th { font-size: 1.3rem; font-weight: 600; } #gantt-tooltip.gantt-chart-bar-popup table tbody tr td { font-size: 1.5rem; font-weight: 400; } #gantt-tooltip.gantt-chart-bar-popup span { position: absolute; right: 2.8rem; bottom: 1.7rem; color: #FFF; display: block; line-height: 3.1rem; height: 3.1rem; border-radius: 0.5rem; border: none; padding: 0 3rem 0 0.8rem; color: #FFF; font-family: 'Pretendard'; font-size: 1.6rem; font-style: normal; font-weight: 600; letter-spacing: -0.032rem; } #gantt-tooltip.gantt-chart-bar-popup span.color-red { background-color: #ED3309; } #gantt-tooltip.gantt-chart-bar-popup span.color-green { background-color: #1FA316; } #gantt-tooltip.gantt-chart-bar-popup span.color-gray { background-color: #616161; } #gantt-tooltip.gantt-chart-bar-popup span.color-yellow { background-color: #f1c40f; } #gantt-tooltip.gantt-chart-bar-popup span.color-blue { background-color: #3498db; } #gantt-tooltip.gantt-chart-bar-popup span img { position: absolute; top: 50%; right: 0.8rem; width: 1.6rem; transform: translate(0, -50%); } .gantt-context-menu { border-radius: 0.8rem; border: 0.1rem solid #E0E0E0; position: absolute; background-color: #fff; box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, .1); z-index: 9; padding: 0.5rem; } .gantt-context-menu > .item { color: #222; position: relative; border-radius: 0.8rem; padding: 0 4.4rem 0 1.1rem; } .gantt-context-menu > .item:hover, .gantt-context-menu > .item:focus { background-color: #f2f2f2; color: #7F40FF; background-color: #F5F0FF; } .gantt-context-menu > .item > a, .gantt-context-menu > .item > button { display: block; font-size: inherit; border: none; cursor: pointer; white-space: nowrap; font-weight: 500; font-size: 1.5rem; line-height: 266.667%; color: inherit; background-color: transparent; } .gantt-context-menu .sub-menu { display: none; position: absolute; top: 0.5rem; left: calc(100% - 0.5rem); border: 0.1rem solid #E0E0E0; background-color: #fff; box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, .1); z-index: 10; border-radius: 0.8rem; padding: 0.5rem; } .gantt-context-menu .sub-menu li { } .gantt-context-menu .sub-menu li button { border-radius: 0.8rem; text-align: center; font-size: 1.5rem; font-weight: 600; line-height: 240%; border: none; padding: 0 2.5rem 0 1.5rem; width: 100%; background-color: transparent; color: var(--status-color); white-space: nowrap; } .gantt-context-menu .sub-menu li button::after { content: ''; display:inline-block; line-height: 240%; width: 0.6rem; height: 0.6rem; background-color: var(--status-color); border-radius: 50%; margin: 0 0 0 1rem; vertical-align: middle; } .gantt-context-menu .sub-menu li button:hover { background-color: #F5F0FF; } .gantt-context-menu > .item:has(.sub-menu):hover > .sub-menu, .gantt-context-menu > .item:has(.sub-menu):focus > .sub-menu { display: block; } .gantt-context-menu > .item:has(.sub-menu):hover::before, .gantt-context-menu > .item:has(.sub-menu):focus::before { content: ''; width: 1.2rem; height: 1.2rem; position: absolute; top: 50%; right: 1.5rem; transform: translate(0, -50%); background-image: url('../img/icon/icon_chart_arrow.png'); background-position: center; background-repeat: no-repeat; background-size: cover; } @media screen and (max-width: 768px) { .gantt-table { --gantt-font-size: 1.3rem; --gantt-font-size-large: 1.6rem; --gantt-header-box-size: 2.2rem; --gantt-body-box-size: 3.5rem; --gantt-body-box-size-large: 4rem; font-size: var(--gantt-font-size); } .gantt-table table tbody tr td.gantt-project-col { width: 30%; } .gantt-table table tbody tr td.gantt-chart-col { width: auto; } .gantt-table table tbody tr td section.gantt-project-body .project-work-subject { padding-left: 2rem; } } /* payroll */ /* 목록 */ .payroll-table { --payroll-font-size: 1.4rem; --payroll-font-size-large: 1.6rem; --payroll-border-color: #C0C0C0; --payroll-header-row: 2; --payroll-header-box-size: 4rem; --payroll-header-box-width: 11rem; --payroll-body-box-size: 4rem; } .payroll-table { border:0.1rem solid var(--payroll-border-color); border-radius: 1rem; overflow: hidden; font-size: var(--payroll-font-size); font-family: 'Pretendard'; } .payroll-table table tbody tr td { padding: 0; vertical-align: top; } /* 업무명 */ .payroll-table table tbody tr td.payroll-member-col { width: 25rem; } .payroll-table table tbody tr td header.payroll-member-header { text-align: center; border-bottom: 0.1rem solid var(--payroll-border-color); background-color: #fff; } .payroll-table table tbody tr td header.payroll-member-header div { overflow: hidden; font-weight: 600; color: #333; font-weight: 600; } .payroll-table table tbody tr td header.payroll-member-header div > * { float: left; line-height: calc(var(--payroll-header-box-size) * var(--payroll-header-row) - 0.1rem); font-size: var(--payroll-font-size-large); box-sizing: border-box; width: 9rem; } .payroll-table table tbody tr td header.payroll-member-header div .team { width: 8rem; } .payroll-table table tbody tr td header.payroll-member-header div .name { width: 8rem; } .payroll-table table tbody tr td header.payroll-member-header div .number { border-right: 0.1rem solid var(--payroll-border-color); } .payroll-table table tbody tr td section.payroll-member-body { text-align: center; background-color: #fff; } .payroll-table table tbody tr td section.payroll-member-body div { overflow: hidden; color: #444; font-weight: 400; } .payroll-table table tbody tr td section.payroll-member-body div > * { float: left; line-height: var(--payroll-body-box-size); height: var(--payroll-body-box-size); border-bottom: 0.1rem solid var(--payroll-border-color); border-right: 0.1rem solid var(--payroll-border-color); width: 9rem; } .payroll-table table tbody tr td section.payroll-member-body div .team { width: 8rem; } .payroll-table table tbody tr td section.payroll-member-body div .name { width: 8rem; } .payroll-table table tbody tr td section.payroll-member-body .total { overflow: hidden; font-weight: 400; line-height: var(--payroll-body-box-size); height: var(--payroll-body-box-size); border-bottom: 0.1rem solid var(--payroll-border-color); border-right: 0.1rem solid var(--payroll-border-color); color: #333; font-family: 'Pretendard'; font-size: 1.8rem; font-style: normal; font-weight: 500; letter-spacing: -0.036rem; background: #DDD; } /* 차트 */ .payroll-table table tbody tr td.payroll-price-col { width: 100%; overflow: auto; } .payroll-table table tbody tr td header.payroll-price-header { display: flex; flex-direction: column; } .payroll-table table tbody tr td header.payroll-price-header .payroll-price-header-item-wrap { display: flex; } .payroll-table table tbody tr td header.payroll-price-header .payroll-price-header-item-wrap > * { flex-shrink: 0; font-size: var(--payroll-font-size); font-weight: 600; color: #333; width: calc(var(--payroll-header-box-width) * var(--item-cnt)); height: var(--payroll-header-box-size); line-height: var(--payroll-header-box-size); text-align: center; white-space: nowrap; border: 0.1rem solid var(--payroll-border-color); border-top: 0; border-right: 0; background-color: #fff; font-size: var(--payroll-font-size-large); } .payroll-table table tbody tr td header.payroll-price-header .payroll-price-header-item-wrap > *:first-child { border-left: 0; } .payroll-table table tbody tr td header.payroll-price-header .payroll-price-header-item-wrap > *.point { color: #7F40FF; } .payroll-table table tbody tr td header.payroll-price-header .payroll-price-header-item-wrap .payroll-item-add-btn { border: none; background: none; color: #fff; cursor: pointer; } .payroll-table table tbody tr td header.payroll-price-header .payroll-price-header-item-wrap .payroll-item-add-btn img { vertical-align: top; height: 1.5rem; height: 1.5rem; } .payroll-table table tbody tr td header.payroll-price-header .payroll-price-header-input-wrap { display: flex; } .payroll-table table tbody tr td header.payroll-price-header .payroll-price-header-input-wrap > * { flex-shrink: 0; font-size: var(--payroll-font-size); font-weight: 400; color: #333; width: var(--payroll-header-box-width); height: var(--payroll-header-box-size); line-height: var(--payroll-header-box-size); text-align: center; white-space: nowrap; border: 0.1rem solid var(--payroll-border-color); border-top: 0; border-right: 0; background-color: #fff; border-left-style: dashed; } .payroll-table table tbody tr td header.payroll-price-header .payroll-price-header-input-wrap > *:first-child { border-left: 0; } .payroll-table table tbody tr td header.payroll-price-header .payroll-price-header-input-wrap > .solid { border-left-style: solid; } .payroll-table table tbody tr td header.payroll-price-header .payroll-price-header-input-wrap > * input { width: 100%; border: none; padding: 0; height: calc(var(--payroll-header-box-size) - 0.1rem); line-height: calc(var(--payroll-header-box-size) - 0.1rem); padding: 0 1rem; color: #444; } .payroll-table table tbody tr td section.payroll-price-body { } .payroll-table table tbody tr td section.payroll-price-body .payroll-price-body-box-row { position: relative; display: flex; white-space: nowrap; } .payroll-table table tbody tr td section.payroll-price-body .payroll-price-body-box-row.total-row * { background: #DDD; } .payroll-table table tbody tr td section.payroll-price-body .payroll-price-body-box-row.total-row > * { border-bottom-style: solid; } .payroll-table table tbody tr td section.payroll-price-body .payroll-price-body-box { position: relative; flex-shrink: 0; display: flex; justify-content: center; align-items: center; font-size: var(--payroll-font-size); width: var(--payroll-header-box-width); height: var(--payroll-body-box-size); text-align: center; white-space: nowrap; border: 0.1rem dashed var(--payroll-border-color); border-top: 0; border-right: 0; background-color: #FFF; } .payroll-table table tbody tr td section.payroll-price-body .payroll-price-body-box.solid { border-left-style: solid; } .payroll-table table tbody tr td section.payroll-price-body .payroll-price-body-box:first-child { border-left: 0; } .payroll-table table tbody tr td section.payroll-price-body .payroll-price-body-box input { width: 100%; border: none; padding: 0; height: calc(var(--payroll-body-box-size) - 0.1rem); line-height: calc(var(--payroll-body-box-size) - 0.1rem); padding: 0 1rem; } @media screen and (max-width: 768px) { .payroll-table { --payroll-font-size: 1.3rem; --payroll-font-size-large: 1.5rem; --payroll-header-row: 2; --payroll-header-box-size: 3.9rem; --payroll-header-box-width: 9.9rem; --payroll-body-box-size: 3.9rem; font-size: var(--payroll-font-size); } } /* agile */ .agile-table { overflow-x: auto; display: flex; gap: 1rem; align-items: stretch; } .agile-table .agile-column { flex: 1 0 33rem; min-width: 33rem; display: flex; flex-direction: column; border-radius: 1rem; border: 0.1rem solid #DDD; } .agile-table .agile-column .agile-header { padding: 0 2rem; } .agile-table .agile-column .agile-header > div { padding: 2rem 0; border-bottom: 0.1rem dashed #D8D8E4; color: #000; font-family: 'Pretendard'; font-size: 1.5rem; font-style: normal; font-weight: 600; line-height: normal; } .agile-table .agile-column .agile-header > div span { display: inline-block; width: 1.8rem; line-height: 1.8rem; text-align: center; color: #FFF; background: var(--agile-color); font-family: 'Pretendard'; font-size: 1.3rem; font-style: normal; font-weight: 400; border-radius: 50%; vertical-align: top; margin: 0 0 0 0.8rem; } .agile-table .agile-column .agile-list { flex: 1; padding: 2rem; display: flex; flex-direction: column; gap: 2rem; min-height: 10rem; } .agile-table .agile-column .agile-list .project-work-card { border-radius: 0.5rem; border-top: 0.2rem solid var(--agile-color); border-right: 0.2rem solid var(--agile-color); border-bottom: 0.5rem solid var(--agile-color); border-left: 0.2rem solid var(--agile-color); position: relative; cursor: grab; opacity: 1; box-shadow: 0.3rem 0.3rem 1rem rgba(0, 0, 0, 0.15); padding: 0.9rem 1.1rem 1.2rem; background: #FFF; } .agile-table .agile-column .agile-list .project-work-card.invalid-drop { height: 0 !important; min-height: auto !important; margin: 0; padding: 0; } .agile-table .agile-column .agile-list .project-work-card.ui-state-disabled { pointer-events: auto; cursor: no-drop !important; } .agile-table .agile-column .agile-list .project-work-card.ui-state-disabled * { cursor: no-drop !important; } .agile-table .agile-column .agile-list .project-work-card:active { cursor: grabbing; } .agile-table .agile-column .agile-list .project-work-card .project-work-card-header { } .agile-table .agile-column .agile-list .project-work-card .project-work-card-header a { display: block; color: #000; font-family: 'Pretendard'; font-size: 1.3rem; font-style: normal; line-height: normal; margin: 0 0 0.9rem; } .agile-table .agile-column .agile-list .project-work-card .project-work-card-header a.project-work-subject.color-red { color: #e74c3c; font-weight: 600; } .agile-table .agile-column .agile-list .project-work-card .project-work-card-header a.project-work-subject strong { display: block; margin: 0 0 0.6rem; font-weight: 500; } .agile-table .agile-column .agile-list .project-work-card .project-work-card-check .checkbox-group { font-size: 0; position: relative; padding: 0 0 0 1.9rem; } .agile-table .agile-column .agile-list .project-work-card .project-work-card-check .checkbox-group input[type=checkbox] { width: 1.3rem; height: 1.3rem; position: absolute; top: 0.1rem; left: 0; pointer-events: auto !important; cursor: pointer; background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: 110%; appearance: none; print-color-adjust: exact; cursor: pointer; border: 0.1rem solid #000000; border-radius: 0; } .agile-table .agile-column .agile-list .project-work-card .project-work-card-check .checkbox-group label { display: inline-block; vertical-align: top; color: #000; font-family: 'Pretendard'; font-size: 1.3rem; font-style: normal; font-weight: 400; line-height: normal; pointer-events: auto !important; cursor: pointer; } .agile-table .agile-column .agile-list .project-work-card .project-work-card-check .checkbox-group input[type=checkbox]:checked { background-image: url('../img/icon/checkbox_checked.png'); background-color: #7F40FF; border-color: #7F40FF; } .agile-table .agile-column .agile-list .project-work-card .project-work-card-check .checkbox-group input[type=checkbox]:checked + label { text-decoration: line-through; color: #AFAFB1; } .agile-table .agile-column .agile-list .project-work-card .project-work-card-body .project-work-person { display: block; color: #000; font-family: 'Pretendard'; font-size: 1.3rem; font-style: normal; font-weight: 400; line-height: normal; margin: 1.9rem 0 0; } .agile-table .agile-column .agile-list .project-work-card .project-work-card-body .project-work-info { margin: 1rem 0 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .agile-table .agile-column .agile-list .project-work-card .project-work-card-body .project-work-info span.project-work-dated { color: #000; font-family: 'Pretendard'; font-size: 1.3rem; font-style: normal; font-weight: 100; line-height: normal; } .agile-table .agile-column .agile-list .project-work-card .project-work-card-body .project-work-info button { background: #FFF; border: none; pointer-events: auto !important; width: 2rem; vertical-align: top; } .agile-table .agile-column .agile-list .project-work-card .project-work-card-body .project-work-info button img { width: 100%; vertical-align: top; } /* 상세 및 폼 틀 */ .style-form { padding: 5rem; } .style-form .title { position: relative; } .style-form .title p { color: #222; font-family: 'Pretendard'; font-size: 2.7rem; font-style: normal; font-weight: 600; line-height: normal; border-bottom: 0.1rem solid #D8D8E4; padding: 0 4rem 2rem 0; margin: 0 0 2rem; } .style-form .title.s p { color: #222; font-size: 2rem; padding: 0 0 1.5rem 0; } .style-form .title .more { position: absolute; top: 0.5rem; right: 0; width: 3.1rem; height: 3.1rem; border: none; margin: 0; background: transparent; } .style-form .title .more span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0.5rem; height: 0.5rem; background: #636363; border-radius: 50%; } .style-form .title .more:before , .style-form .title .more:after { content: ''; position: absolute; left: 50%; transform: translate(-50%, 0); width: 0.5rem; height: 0.5rem; background: #636363; border-radius: 50%; } .style-form .title .more:before { top: 0.3rem; } .style-form .title .more:after { bottom: 0.3rem; } .style-form .title .btn { position: absolute; top: 4.6rem; right: 0; border-radius: 1rem; border: 0.1rem solid #AAA; background: #FFF; padding: 1rem; display: none; z-index: 10; cursor: auto; } .style-form .title .btn li { margin: 1.2rem 0 0; } .style-form .title .btn li:first-child { margin: 0; } .style-form .title .btn li button , .style-form .title .btn li a { display: block; margin: 0; border: none; background: transparent; padding: 0 0.5rem 0 2.5rem; position: relative; color: #636363; font-family: 'Pretendard'; font-size: 1.5rem; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.03rem; width: 100%; text-align: left; } .style-form .title .btn li button img , .style-form .title .btn li a img { position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 2rem; } .style-form .title .btn li button:hover , .style-form .title .btn li a:hover { color: var(--main-color); } .style-form .title .btn li button:hover img , .style-form .title .btn li a:hover img { filter: invert(0.2) sepia(1) saturate(10000%) hue-rotate(270deg); } .style-form .grid-wrap { display: flex; gap: 2rem; } .style-form .grid-wrap .grid.left { flex: 4.5; } .style-form .grid-wrap .grid.right { flex: 5.5; } .style-form .grid-wrap .grid .row { display: flex; align-items: stretch; } .style-form .grid-wrap .grid .row.ap_addition_form { display:none; } .style-form .grid-wrap .grid .row.mb_addition_form { display:none; } .style-form .grid-wrap .grid .row > dt { color: #888; font-family: 'Pretendard'; font-size: 1.5rem; font-style: normal; font-weight: 400; width: 16%; min-width: 9rem; padding: 1.1rem 0; align-self: flex-start; max-width: 11rem; } .style-form .grid-wrap .grid.right .row > dt { width: 14%; } .style-form .grid-wrap .grid .row > dt span.star { color: #ED3309; font-weight: 100; } .style-form .grid-wrap .grid .row > dd { color: #666; font-family: 'Pretendard'; font-size: 1.6rem; font-style: normal; font-weight: 400; letter-spacing: -0.04rem; flex: 1; min-width: 0; align-self: center; line-height: 3.1rem; padding: 0.45rem 0; } .style-form .grid-wrap .grid .row > dd:has(> select) { padding: 0.2rem 0; } .style-form .grid-wrap .grid .row > dd:has(> .status) { position: relative; } .style-form .grid-wrap .grid .row > dd strong { color: #444; font-weight: 600; } .style-form .grid-wrap .grid .row > dd p.explan { color: #A6A6A6; font-family: 'Pretendard'; font-size: 1.3rem; font-style: normal; font-weight: 400; line-height: 2rem; margin: 0.5rem 0 0; } .style-form .grid-wrap .grid.right { flex: 5.5; } .style-form .grid-wrap .grid hr { border: none; height: 0.1rem; background-color: #D8D8E4; } @media screen and (max-width:1440px) { .style-form { padding: 4rem; } } @media screen and (max-width:1280px) { .style-form { padding: 3rem; } } @media screen and (max-width:1024px) { .style-form { padding: 2rem; } } @media screen and (max-width:768px) { .style-form { padding: 1rem; } .style-form .grid-wrap { flex-direction: column; gap: 0; } .style-form .grid-wrap:has(>.grid > .title) { gap:4rem; } .style-form .grid-wrap .grid { flex: 1 !important; } .style-form .grid-wrap .grid.right .row > dt { width: 16%; } } @media screen and (max-width:640px) { .style-form { padding: 2.5rem; } } /* 상세 및 폼 세부 */ .style-form .status { position: absolute; top: 50%; left: 0; transform: translate(0, -50%); max-width: 50%; line-height: 0; } .style-form .status span img { position: absolute; top: 50%; right: 0.8rem; width: 1.6rem; transform: translate(0, -50%); } .style-form .status .list { position: absolute; top: 100%; right: 0; } .style-form .status .list li { } .style-form #progress { font-size: 0; padding: 0.85rem 0 0; } .style-form #progress .bar { display: inline-block; height: 1.5rem; width: 50%; border-radius: 5rem; background: #EEE; position: relative; vertical-align: top; margin: 0.3rem 0 0; } .style-form #progress .bar p { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 5rem; height: 100%; background: #222; transition: all 0.25s ease; } .style-form #progress .bar span { position: absolute; width: 2.6rem; height: 2.6rem; border: 0.3rem solid #FFF; box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.25); border-radius: 50%; transform: translate(-50%, -50%); top: 50%; background: #222; left: 0; transition: all 0.25s ease; } .style-form #progress .str { display: inline-block; vertical-align: top; color: #222; font-family: 'Pretendard'; font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: -0.036rem; margin: 0 0 0 1rem; } .style-form .content { margin: 1.5rem 0 0; } .style-form .content #editor { width: 100%; resize: none; } .style-form .content #editor .toastui-editor-contents { font-size: 1.6rem; line-height: 156.25%; } .style-form .content textarea.agree , .style-form .content textarea#editor { width: 100%; resize: none; border: 0.1rem solid #dadde6; height: 50rem; padding: 2rem 2.5rem; border-radius: 0.5rem; } .style-form .content textarea.agree { height: 25rem; } .style-form .content textarea.agree , .style-form .content textarea#editor , .style-form .content .textarea { color: #444; font-family: 'Pretendard'; font-size: 1.6rem; font-style: normal; font-weight: 400; line-height: 156.25%; letter-spacing: -0.032rem; } .style-form .content .textarea:not(:has(textarea)) { margin: 0 0 16rem; } .style-form .content .work { } .style-form .content .work .b { padding: 0 0 0 2.2rem; position: relative; color: #333; font-family: 'Pretendard'; font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: normal; margin: 0 0 2rem; } .style-form .content .work .b.s { color: #555; font-size: 1.4rem; font-weight: 500; } .style-form .content .work .b img { position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 1.4rem; } .style-form .content .work .b span { margin: 0 0 0 1rem; color: #888; font-family: 'Pretendard'; font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: normal;} .style-form .content .work .list { border-top: 0.1rem solid #D8D8E4; margin: 0 0 4rem; } .style-form .content .work .list .row { display: flex; border-bottom: 0.1rem solid #D8D8E4; gap: 2rem; } .style-form .content .work .list .row .cell { box-sizing: border-box; display: flex; align-items: center; padding: 1rem 0; } .style-form .content .work .list .row .cell a { color: #444; text-align: center; font-family: 'Pretendard'; font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 3rem; letter-spacing: -0.028rem; display: block; flex: 1; } .style-form .content .work .list .row .cell.col-status { width: 7rem; flex-shrink: 0; } .style-form .content .work .list .row .cell.col-subject { flex: 1; min-width: 0; } .style-form .content .work .list .row .cell.col-name { width: 6rem; flex-shrink: 0; } .style-form .content .work .list .row .cell.col-date { width: 11rem; flex-shrink: 0; } .style-form .content .work .list .row .cell.col-status a { border-radius: 0.5rem; } .style-form .content .work .list .row .cell.col-subject a { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333;font-size: 1.6rem; font-weight: 500; letter-spacing: -0.032rem; } .style-form .scroll { } .style-form .scroll .box .b { color: #333; position: relative; font-family: 'Pretendard'; font-size: 1.8rem; font-style: normal; font-weight: 600; line-height: normal; padding: 0 0 0 2rem; margin: 0 0 0.5rem; } .style-form .scroll .box .b.d { padding: 0 0 0 1.1rem; } .style-form .scroll .box .b img { position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 1.25rem; } .style-form .scroll .box .b.d img { width: 0.6rem; } .style-form .scroll .box .b span { color: #888; font-family: 'Pretendard'; font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: normal; margin: 0 0 0 1rem; } .style-form .scroll .box .memo { margin: 0.5rem 0 0; } .style-form .scroll .box .memo textarea { color: #222; font-family: 'Pretendard'; font-size: 1.6rem; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.032rem; border: none; resize: none; width: 100%; height: 5.7rem; vertical-align: top; } .style-form .scroll .box .memo textarea::placeholder { color: #AAA; } .style-form .scroll .box .memo.line textarea { border-radius: 1rem; border: 0.1rem solid #EEE; padding: 1.2rem 1.5rem; } .style-form .scroll .box .list { } .style-form .scroll .box .list.hidden dl:nth-child(n+6) { display: none; } .style-form .scroll .box .list dl dt { margin: 1.5rem 0 0; color: #444; font-family: 'Pretendard'; font-size: 1.6rem; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.032rem; position: relative; } .style-form .scroll .box .list dl dt strong { font-weight: 600; } .style-form .scroll .box .list dl dt i { color: #999; font-size: 1.3rem; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.026rem; margin: 0 0 0 1rem; } .style-form .scroll .box .list dl dt .more { position: absolute; top: 0.4rem; right: 0; width: 1.6rem; height: 1.6rem; border: none; margin: 0; background: transparent; } .style-form .scroll .box .list dl dt .more span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0.2rem; height: 0.2rem; background: #636363; border-radius: 50%; } .style-form .scroll .box .list dl dt .more:before , .style-form .scroll .box .list dl dt .more:after { content: ''; position: absolute; left: 50%; transform: translate(-50%, 0); width: 0.2rem; height: 0.2rem; background: #636363; border-radius: 50%; } .style-form .scroll .box .list dl dt .more:before { top: 0.3rem; } .style-form .scroll .box .list dl dt .more:after { bottom: 0.3rem; } .style-form .scroll .box .list dl dt .btn { position: absolute; top: 2.7rem; right: 0; border-radius: 1rem; border: 0.1rem solid #AAA; background: #FFF; padding: 1rem; display: none; z-index: 10; } .style-form .scroll .box .list dl dt .btn li { margin: 1rem 0 0; } .style-form .scroll .box .list dl dt .btn li:first-child { margin: 0; } .style-form .scroll .box .list dl dt .btn li button , .style-form .scroll .box .list dl dt .btn li a { display: block; margin: 0; border: none; background: transparent; padding: 0 0.5rem 0 2.5rem; position: relative; color: #636363; font-family: 'Pretendard'; font-size: 1.5rem; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.03rem; width: 100%; text-align: left; } .style-form .scroll .box .list dl dt .btn li button img , .style-form .scroll .box .list dl dt .btn li a img { position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 2rem; } .style-form .scroll .box .list dl dt .btn li button:hover , .style-form .scroll .box .list dl dt .btn li a:hover { color: var(--main-color); } .style-form .scroll .box .list dl dt .btn li button:hover img , .style-form .scroll .box .list dl dt .btn li a:hover img { filter: invert(0.2) sepia(1) saturate(10000%) hue-rotate(270deg); } .style-form .scroll .box .list dl dd { padding: 1rem 0 1.5rem; border-bottom: 0.1rem solid #EEE; color: #666; font-family: 'Pretendard'; font-size: 1.5rem; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.032rem; } .style-form .scroll .box .list dl dd strong { font-weight: 500; } .style-form .scroll .box .list dl dd i { font-style: normal; } .style-form .scroll .box .list dl dd .more { background: transparent; border: none; font-size: 1.2rem; color: #444; font-weight: 600; } .style-form .scroll .box .list dl dd .comment-content .comment-content-view * { word-break: break-all; } .style-form .scroll .box .button { text-align: right; margin: 2rem 0 0; } .style-form .scroll .box .comment_form .button { margin: 1rem 0 0; } .style-form .scroll .box .button a , .style-form .scroll .box .button button { display: inline-block; text-align: center; padding: 0.6rem 1.8rem; font-family: 'Pretendard'; font-size: 1.4rem; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: -0.028rem; border: none; border-radius: 0.5rem; } .style-form .scroll .box .button .submit { color: #FFF; background: #222; } .style-form .scroll .box .button .cancel { color: #222; background: #EEE; } @media screen and (max-width:1440px) { } @media screen and (max-width:1280px) { } @media screen and (max-width:1024px) { } @media screen and (max-width:768px) { } @media screen and (max-width:640px) { } .style-form select , .style-form textarea , .style-form input[type=email] , .style-form input[type=text] , .style-form input[type=email] , .style-form input[type=password] , .style-form input[type=file] , .style-form input[type=date] , .style-form input[type=time] , .style-form input[type=datetime-local] { outline: none; border: none; line-height: 3rem; height: 3.1rem; background-color: #ffffff; box-sizing: border-box; color: #5c5c5c; font-size: 1.6rem; font-weight: 500; border-radius: 0; width: 50%; vertical-align: top; box-sizing: border-box; font-size: inherit; } .style-form textarea::placeholder , .style-form input[type=email]::placeholder , .style-form input[type=text]::placeholder , .style-form input[type=email]::placeholder , .style-form input[type=password]::placeholder , .style-form input[type=file]::placeholder { color: #888; } .style-form textarea { resize: none; border: 0.1rem solid #D8D8E4; height: 9.3rem; height: 9rem; width: 100%; } .style-form select { height: 3.6rem; line-height: 3.6rem; border-radius: 5px; background-color: #F6F6F6; } .style-form input[type=radio] {} .style-form input[type=checkbox] {} .style-form input[type=date] , .style-form input[type=time] , .style-form input[type=datetime-local] , .style-form input[type=text] , .style-form input[type=email] , .style-form input[type=password] { border-bottom: 0.1rem solid #D8D8E4; } .style-form input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; } .style-form .input-file { position: relative; font-size: 0; } .style-form .input-file > * { display: inline-block; vertical-align: top; } .style-form .input-file > input[type=text] { padding: 0 1.2rem 0 9.2rem ; border-radius: 0.5rem; border: 0.1rem solid #E1E1E1; background: #FFF; cursor: pointer; font-size: 1.4rem; font-weight: 400; color: #888; margin: 0 0.5rem 0 0; } .style-form .input-file > label { position: absolute; top: 0.1rem; left: 0.1rem; width: 7.9rem; height: 2.9rem; text-align: center; padding: 0; border-radius: 0.5rem 0 0 0.5rem; background: #F6F6F6; color: #6A6A6A; font-family: 'Pretendard'; font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 2.9rem; cursor: pointer; } .style-form .input-file > picture { } .style-form .input-file > picture button { background-size: cover; background-repeat: no-repeat; width: 3.1rem; height: 3.1rem; border: none; margin: 0; background-color: transparent; background-position: center; vertical-align: top; } .style-form .input-file .delete { display: block; width: auto; position: unset; top: auto; left: auto; text-align: left; line-height: 2rem; margin: 0.5rem 0 0; } .style-form .input-file .delete label { vertical-align:top; color: #444; font-family: 'Pretendard'; font-size: 1.3rem; font-style: normal; font-weight: 400; } .style-form .input-file .delete label > * { display: inline-block; } .style-form .input-file .delete label > span { color: #888; position: relative; padding: 0 1.7rem 0 1rem; } .style-form .input-file .delete label > span > input { position: absolute; top: 50%; right: 0; transform: translate(0, -50%); width: 1.2rem; height: 1.2rem; border-radius: 0.3rem; border: 0.1rem solid #222; background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: 110%; appearance: none; print-color-adjust: exact; cursor: pointer; } .style-form .input-file .delete label > span > input:checked { background-image: url('../img/icon/checkbox_checked.png'); background-color: #222; } .style-form .input-file .delete label > span > input:disabled { background-color: #EEE; cursor: default; } .style-form .input-file a { color: #444; font-family: 'Pretendard'; font-size: 14px; font-style: normal; font-weight: 400; position: relative; padding-left: 2.5rem; margin: 0 0.5rem 0 0; } .style-form .input-file a img { position: absolute; top: 0.5rem; left: 0; width: 2rem; } .style-form .input-radio { font-size: 0; } .style-form .input-radio > label { display: inline-block; margin-right: 3.5rem; white-space: nowrap; position: relative; padding: 0 0 0 2.8rem; color: #222; font-family: 'Pretendard'; font-size: 1.4rem; font-style: normal; font-weight: 500; cursor: pointer; vertical-align: top; } .style-form .input-radio > label:last-child { margin: 0; } .style-form .input-radio > label input { position: absolute; opacity: 0; top: 50%; left: 50%; width: 0.1rem; height: 0.1rem;} .style-form .input-radio > label span { display: block; position: absolute; top: 50%; left: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; transform: translate(0, -50%); border: 0.1rem solid #DDDDDD; } .style-form .input-radio > label input:checked + span::after { content: ''; position: absolute; width: 1rem; height: 1rem; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #7F40FF; border-radius: 50%; } .style-form .input-checkbox { font-size: 0; } .style-form .input-checkbox > label { display: inline-block; margin-right: 3.5rem; white-space: nowrap; position: relative; padding: 0 0 0 2.8rem; color: #222; font-family: 'Pretendard'; font-size: 1.4rem; font-style: normal; font-weight: 400; cursor: pointer; vertical-align: top; } .style-form .input-checkbox > label:last-child { margin: 0; } .style-form .input-checkbox > label input { position: absolute; opacity: 0; top: 50%; left: 50%; width: 0.1rem; height: 0.1rem;} .style-form .input-checkbox > label span { display: block; position: absolute; top: 50%; left: 0; width: 1.8rem; height: 1.8rem; border-radius: 0.3rem; transform: translate(0, -50%); background-color: #D7D7D7; background-repeat: no-repeat; background-position: center; background-size: 110%; background-image: url('../img/icon/checkbox_checked.png'); } .style-form .input-checkbox > label div { display: inline; color: #7F40FF; font-weight: 400; } .style-form .input-checkbox > label input:checked + span { background-color: #7F40FF; } .style-form .input-checkbox > button { line-height: 2rem; vertical-align: middle; font-size: 1.3rem; color: #454649; background-color: #e8e9ec; border: none; padding: 0 1rem; border-radius: 0.3rem; } .style-form .input-two { width: 50%; font-size: 0; } .style-form .input-two select { width:calc(50% - 0.825rem); font-size: 1.6rem; } .style-form .input-two span { display:inline-block; width: 1.65rem; text-align:center; font-size: 1.6rem; } .style-form .input-three { width: 50%; font-size: 0; } .style-form .input-three input[type=text] { width:calc(33.33% - 1.1rem); font-size: 1.6rem; vertical-align: top; } .style-form .input-three span { display:inline-block; width: 1.65rem; text-align:center; font-size: 1.6rem; vertical-align: top; } .style-form .title select , .style-form .title input[type=date] , .style-form .title input[type=text] { border: none; line-height: 3.3rem; height: 3.3rem; color: #222; } .style-form .title select { background-color: transparent; } .style-form .status select , .style-form .status span { display: inline-block; border: none; line-height: 3.1rem; height: 3.1rem; border-radius: 0.5rem; border: none; padding: 0 3rem 0 0.8rem; color: #FFF; font-family: 'Pretendard'; font-size: 1.6rem; font-style: normal; font-weight: 600; letter-spacing: -0.032rem; position: relative; width: 100%; } .style-form .status select { background-color: var(--color); } .style-form .status span.color-red { background: #ED3309; } .style-form .status span.color-green { background: #1FA316; } .style-form .status span.color-gray { background: #616161; } .style-form .form-add-input { position: relative; width: 50%; } .style-form .form-add-input input { width: 100%; } .style-form .form-add-input .formAddBtn { position: absolute; top: 0; right: 0; bottom: 0; height: 100%; width: 3rem; border: none; background: transparent; } .style-form .form-add-input .formAddBtn:before { content: ''; position: absolute; top: 50%; left: 50%; height: 1.6rem; width: 1.6rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5 L12 19 M5 12 L19 12' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; transform: translate(-50%, -50%); } .style-form .search-member-group { } .style-form .search-member-group .search-member-input { position: relative; width: 50%; } .style-form .search-member-group .search-member-input #searchMemberInput { width: 100%; } .style-form .search-member-group .search-member-input #searchMemberAddBtn { position: absolute; top: 0; right: 0; bottom: 0; height: 100%; width: 3rem; border: none; background: transparent; } .style-form .search-member-group .search-member-input #searchMemberAddBtn:before { content: ''; position: absolute; top: 50%; left: 50%; height: 1.6rem; width: 1.6rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5 L12 19 M5 12 L19 12' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; transform: translate(-50%, -50%); } .style-form .search-member-group .search-member-input #searchMemberBox { display: none; position: absolute; top: calc(100% + 1rem); left: 0; max-height: 30rem; min-width: 50%; max-width: 100%; border: 0.1rem solid #ddd; background-color: #f7f7f7; padding: 1.45rem; overflow: auto; z-index: 10; border-radius: 0.5rem; } .style-form .search-member-group .search-member-input #searchMemberBox.right { left: initial; right: 0; } .style-form .search-member-group .search-member-input #searchMemberBox .search-member-item { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .style-form .search-member-group .search-member-input #searchMemberBox p.empty { } .style-form .search-member-list-group { display: flex; flex-wrap: wrap; gap: 0.8rem; } .style-form .search-member-list-group:has(.search-member-selected) { margin-top: 1rem; } .style-form .search-member-list-group .search-member-selected { position: relative; line-height: 3.1rem; border-radius: 0.5rem; border: none; padding: 0 3rem 0 0.8rem; color: #FFF; background: #222; font-family: 'Pretendard'; font-size: 1.6rem; font-style: normal; letter-spacing: -0.032rem; } .style-form .search-member-list-group .search-member-selected button { position: absolute; top: 50%; right: 0.8rem; width: 1.6rem; height: 1.6rem; border: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6 L18 18 M18 6 L6 18' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; transform: translate(0, -50%); } .style-form .company-option-list-group { display: flex; flex-wrap: wrap; gap: 0.8rem; } .style-form .company-option-list-group:has(.company-option-selected) { margin-top: 1rem; } .style-form .company-option-list-group .company-option-selected { position: relative; line-height: 3.1rem; border-radius: 0.5rem; border: none; padding: 0 3rem 0 0.8rem; color: #FFF; background: #222; font-family: 'Pretendard'; font-size: 1.6rem; font-style: normal; letter-spacing: -0.032rem; } .style-form .company-option-list-group-address .company-option-selected { width: 100%; } .style-form .company-option-list-group .company-option-selected button { position: absolute; top: 50%; right: 0.8rem; width: 1.6rem; height: 1.6rem; border: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6 L18 18 M18 6 L6 18' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; transform: translate(0, -50%); } .style-form .checkListInputWrap , .style-form #checkListInputWrap { position: relative; width: 50%; } .style-form .checkListInputWrap .checkListInput, .style-form #checkListInputWrap #checkListInput { width: 100%; padding: 0 3rem 0 0; } .style-form .checkListInputWrap .checkListAddBtn , .style-form #checkListInputWrap #checkListAddBtn { position: absolute; top: 0; right: 0; bottom: 0; height: 100%; width: 3rem; border: none; background: transparent; } .style-form .checkListInputWrap .checkListAddBtn:before , .style-form #checkListInputWrap #checkListAddBtn:before { content: ''; position: absolute; top: 50%; left: 50%; height: 1.6rem; width: 1.6rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5 L12 19 M5 12 L19 12' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; transform: translate(-50%, -50%); } .style-form .checkList , .style-form #checkList { margin: 0.8rem 0 0; } .style-form .checkList.n , .style-form #checkList.n { margin: -0.55rem 0; } .style-form .checkList .checkbox-group , .style-form #checkList .checkbox-group { position: relative; padding: 0 0 0 2.1rem; overflow: hidden; display: flex; align-items: center; } .style-form .checkList .checkbox-group.n , .style-form #checkList .checkbox-group.n { padding: 0 0 0 2.4rem; } .style-form .checkList .checkbox-group.z , .style-form #checkList .checkbox-group.z { padding: 0; } .style-form .checkList .checkbox-group > * , .style-form #checkList .checkbox-group > * { float: left; } .style-form .checkList .checkbox-group input[type=checkbox] , .style-form #checkList .checkbox-group input[type=checkbox] { width: 1.6rem; height: 1.6rem; border-radius: 0.3rem; border: 0.1rem solid #222; position: absolute; top: 0.7rem; left: 0; background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: 110%; appearance: none; print-color-adjust: exact; cursor: pointer; } .style-form .checkList .checkbox-group input[type=checkbox]:checked , .style-form #checkList .checkbox-group input[type=checkbox]:checked { background-image: url('../img/icon/checkbox_checked.png'); background-color: #222; } .style-form .checkList .checkbox-group input[type=checkbox]:disabled , .style-form #checkList .checkbox-group input[type=checkbox]:disabled { background-color: #EEE; cursor: default; } .style-form .checkList .checkbox-group input[type=text] , .style-form #checkList .checkbox-group input[type=text] { height: 3rem; line-height: 2.9rem; } .style-form .checkList .checkbox-group span , .style-form #checkList .checkbox-group span { display: block; width: 2.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: absolute; top: 0; left: 0; color: #444; font-family: 'Pretendard'; font-size: 1.6rem; font-style: normal; font-weight: 400; letter-spacing: -0.036rem; line-height: 3rem; } .style-form .checkList .checkbox-group label , .style-form #checkList .checkbox-group label { display: inline-block; color: #444; font-family: 'Pretendard'; font-size: 1.6rem; font-style: normal; font-weight: 400; letter-spacing: -0.036rem; line-height: 3rem; cursor: pointer; vertical-align: top; } .style-form .checkList .checkbox-group input[type=color] , .style-form #checkList .checkbox-group input[type=color] { padding: 0; border: none; background-color: transparent; border-radius: 0.5rem; overflow: hidden; height: 2rem; width: 8rem; margin: 0 1rem 0 0; } .style-form .checkList .checkbox-group label.disabled , .style-form #checkList .checkbox-group label.disabled { cursor: auto; } .style-form .checkList .checkbox-group .check-list-content-input-group , .style-form #checkList .checkbox-group .check-list-content-input-group { display: none; overflow: hidden; } .style-form .checkList .checkbox-group .check-list-content-input-group.active , .style-form #checkList .checkbox-group .check-list-content-input-group.active { width: 100%; display: inline-block; vertical-align: top; } .style-form .checkList .checkbox-group:has(input[type="color"]) .check-list-content-input-group.active , .style-form #checkList .checkbox-group:has(input[type="color"]) .check-list-content-input-group.active { width: auto; } .style-form .checkList .checkbox-group .check-list-content-input-group > * , .style-form #checkList .checkbox-group .check-list-content-input-group > * { float: left; } .style-form .checkList .checkbox-group .check-list-delete-btn , .style-form .checkList .checkbox-group .check-list-content-input-group button , .style-form #checkList .checkbox-group .check-list-delete-btn , .style-form #checkList .checkbox-group .check-list-content-input-group button { height: 3rem; line-height: 3rem; background: transparent; border: 0.1rem solid #D8D8E4; padding: 0 0.8rem; margin: 0 0 0 0.8rem; border-radius: 0.5rem; font-size: 1.5rem; } .style-form .checkList .checkbox-group .check-list-content-input-group .check-list-save , .style-form #checkList .checkbox-group .check-list-content-input-group .check-list-save { border-color: #7F40FF; background: #FFF; color: #7F40FF; font-weight: 600; } .style-form .checkList .checkbox-group .check-list-content-input-group .check-list-cancel , .style-form #checkList .checkbox-group .check-list-content-input-group .check-list-cancel { border-color: #DDD; background: #EEE; font-weight: 400; } .style-form .checkList .checkbox-group .check-list-delete-btn , .style-form #checkList .checkbox-group .check-list-delete-btn { height: 1.6rem; line-height: normal; width: 1.6rem; position: relative; border-radius: 0.3rem; box-sizing: border-box; padding: 0; } .style-form .checkList .checkbox-group .check-list-delete-btn:before , .style-form #checkList .checkbox-group .check-list-delete-btn:before { content: ''; position: absolute; top: 50%; left: 50%; width: 1.6rem; height: 1.6rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6 L18 18 M18 6 L6 18' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 75%; transform: translate(-50%, -50%); } @media screen and (max-width:1440px) { .style-form select , .style-form input[type=email] , .style-form input[type=text] , .style-form input[type=email] , .style-form input[type=password] , .style-form input[type=file] , .style-form input[type=date] , .style-form input[type=time] , .style-form input[type=datetime-local] { width: 55%; } .style-form .input-two , .style-form .input-three { width: 55%; } } @media screen and (max-width:1280px) { .style-form select , .style-form input[type=email] , .style-form input[type=text] , .style-form input[type=email] , .style-form input[type=password] , .style-form input[type=file] , .style-form input[type=date] , .style-form input[type=time] , .style-form input[type=datetime-local] { width: 60%; } .style-form .input-two , .style-form .input-three { width: 60%; } } @media screen and (max-width:1024px) { .style-form select , .style-form input[type=email] , .style-form input[type=text] , .style-form input[type=email] , .style-form input[type=password] , .style-form input[type=file] , .style-form input[type=date] , .style-form input[type=time] , .style-form input[type=datetime-local] { width: 65%; } .style-form .input-two , .style-form .input-three { width: 65%; } } @media screen and (max-width:768px) { .style-form select , .style-form input[type=email] , .style-form input[type=text] , .style-form input[type=email] , .style-form input[type=password] , .style-form input[type=file] , .style-form input[type=date] , .style-form input[type=time] , .style-form input[type=datetime-local] { width: 70%; } .style-form .input-two , .style-form .input-three { width: 70%; } } @media screen and (max-width:640px) { .style-form select , .style-form input[type=email] , .style-form input[type=text] , .style-form input[type=email] , .style-form input[type=password] , .style-form input[type=file] , .style-form input[type=date] , .style-form input[type=time] , .style-form input[type=datetime-local] { width: 75%; } .style-form .input-two , .style-form .input-three { width: 75%; } } /* list button layout */ #dataResultList .btn-wrap { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; margin: 2rem 0 4rem; } #dataResultList .btn-wrap > * { flex-shrink: 0; display: flex; justify-content: center; align-items: center; height: calc(4.5rem + 2px); }