Code - 2025_PROJECT/mjgo

/* Input, Textarea 등 form 관련 레이아웃 */ .form_wrap{display:flex;justify-content:space-between;align-items:center;gap:8px;} .form_wrap.column{flex-direction:column;gap:4px;} .form_wrap>div{display:flex;flex:1;gap:8px;} .form_wrap.left, .form_wrap .left{justify-content:flex-start;} .form_wrap.center,.form_wrap .center{justify-content:center;} .form_wrap.right,.form_wrap .right{justify-content:flex-end;} /* 버튼 레이아웃 */ .btn_wrap{display:flex;justify-content:space-between;gap:8px;} .btn_wrap.column{flex-direction:column;gap:4px;} .btn_wrap>div{display:flex;flex:1;gap:8px} .btn_wrap.left, .btn_wrap .left{justify-content:flex-start;} .btn_wrap.center,.btn_wrap .center{justify-content:center;} .btn_wrap.right,.btn_wrap .right{justify-content:flex-end;} .center_btn_wrap {margin:30px 0 0;text-align:center;} /* 버튼 스타일 */ .btn{border-radius: 5px;} .btn:hover{box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.12);transition: all 0.3s ease;} .btn.only_text{padding:0 !important;} .btn.only_icon{padding:0 !important;} .btn.mix{display:flex;align-items:center;} .btn.mix .icon{height:100%;background-size:contain;} .btn.xssmall{height: 28px;} .btn.ssmall{height: 30px;} .btn.small{height: 32px;} .btn.medium{height: 34px;} .btn.large{height: 36px;} .btn.xlarge{height: 38px;} .btn.fill.primary{background-color: var(--primary-color);color: #fff;} .btn.fill.primary:hover{background-color: var(--primary-color-hover);color: #fff;} .btn.fill.primary_light{background-color: var(--primary-light-color);border: 1px solid var(--primary-light-border);color:#222;} .btn.fill.primary_light:hover{background-color: var(--primary-light-color-hover);} .btn.fill.secondary{background-color: var(--secondary-color);color: #222;} .btn.fill.secondary:hover{background-color: var(--secondary-color-hover);color: #222;} .btn.fill.red{background-color: var(--red-color);color: #fff;} .btn.fill.red:hover{background-color: var(--red-color-hover);} .btn.fill.green{background-color: var(--green-color);color: #fff;} .btn.fill.green:hover{background-color: var(--green-color-hover);} .btn.line.primary{border: 1px solid var(--primary-color);color: var(--primary-color);} .btn.line.primary:hover{border: var(--primary-color-hover);color: var(--primary-color-hover);} .btn.line.secondary{border: 1px solid var(--secondary-color);color: #222;} .btn.line.secondary:hover{border: 1px solid var(--secondary-color-hover);} .btn.line.red{border: 1px solid var(--red-color);color: var(--red-color);} .btn.line.red:hover{border: var(--red-color-hover);color: var(--red-color-hover);} .btn.line.green{border: 1px solid var(--green-color);color: var(--green-color);} .btn.line.green:hover{background-color: var(--green-color-hover);} .btn.fill.disabled,.btn.fill.readonly,.btn.fill:disabled{background:var(--disable-fill-bg-color) !important; color:var(--disable-fill-text-color) !important; pointer-events:none;} .btn.line.disabled,.btn.line.readonly,.btn.line:disabled{background:var(--disable-line-bg-color) !important;border:1px solid var(--disable-line-border-color);color:var(--disable-line-text-color) !important;pointer-events:none;} /* button type */ .btnType,[class^="btnType"]{font-size:16px;font-weight:400;border-radius:3px;text-align:center;} .btnType:hover{box-shadow:0px 0px 10px 0 rgba(0,0,0,0.12);} .btnType1{padding:0 14px;height:36px;background:#f2f2f2;border:1px solid #d5d5d5;color:var(--primary-color-hover);} .btnType2{padding:0 6px;height:36px;background-color:var(--primary-color)!important;color:#fff!important;} .btnType3{padding:0 6px;height:36px;background-color:#fff;border:1px solid var(--primary-color);color:var(--primary-color);} .btnType4{padding-right:10px;width:90px;height:26px;font-size:14px;background-color:#8e8e8e;background-image:url(/publish/images/arrow1.png);background-repeat:no-repeat;background-position:86% center;color:#fff;vertical-align:inherit;} .btnType5{padding:0 7px;height:28px;background-color:#fff;border:1px solid var(--primary-color);color:var(--primary-color);} .btnType6{padding:0 16px;height:40px;font-weight:400;background-color:var(--lightgray-bg)!important;border:1px solid #d5d5d5!important;} .btnType7{width:100%;max-width:190px;height:40px;font-weight:300;background-color:#fff;border:1px solid var(--gray-border);} .btnType8{max-width:190px;height:40px;font-weight:300;background-color:var(--secondary-light-color);border:1px solid var(--secondary-light-color-hover);} .btnType9{max-width:93px;height:40px;font-weight:300;background-color:var(--gray-color)!important;color:#fff!important;} .btnType10{height:50px;font-size:20px;background-color:#fff;border:1px solid var(--primary-color);color:var(--primary-color);} .btnType11{height:50px;font-size:20px;background-color:var(--primary-color);color:#fff;} .btnType12{height:32px;font-size:14px;font-weight:300;background-color:#fff;border:1px solid #b1b1b1;} .btnType13{height:32px;font-size:14px;font-weight:300;color:#fff;} .btnType13.c1{background-color:#2a57c8;border:1px solid #2a57c8;} .btnType13.c2{background-color:#0b96d0;border:1px solid #0b96d0;} .btnType13.c3{background-color:#129738;border:1px solid #129738;} .btnType14{padding:0 10px;height:36px;font-size:14px;font-weight:400;letter-spacing:-1px;background-color:#fff;border:1px solid var(--gray-border);color:#6d6d6d;} .btnType15{margin-right:2px;width:80px;height:32px;font-size:14px;background-color:#fff;border:1px solid #d5d5d5;} .btnType16{padding:0 39px;height:50px;font-size:18px;background-color:var(--primary-color);color:#fff;} .btnType17{width:144px;height:50px;font-size:18px;background-color:var(--gray-color)!important;color:#fff!important;} .btnType18{width:145px;height:50px;font-size:18px;background-color:#fff;border:1px solid var(--primary-color);color:var(--primary-color);} .btnType19{padding:0 16px;margin-right:2px;height:50px;background-color:#fff;border:1px solid var(--gray-border);color:#222;} .btnType20{margin:3px 0 0 0;width:70px;height:28px;font-size:14px;font-weight:400;line-height:1;background-color:#fff;border:1px solid var(--gray-border);color:#555;} .btnType21{padding:0 14px;height:36px;background-color:var(--secondary-color);color:#fff;} .btnType22{padding:0 12px;height:28px;font-size:14px;font-weight:500;background-color:var(--secondary-color);color:#fff;} .btnType23{padding:4px 13px;margin:0 3px;font-size:14px;font-weight:400;background:var(--gray-color);color:#fff;} /*api에 사용*/ .btnType24{margin:3px 0;width:70px;height:28px;font-size:14px;font-weight:400;line-height:1.5;background:#fff;border:1px solid #8697c2;color:var(--primary-color);} /*재사용 버튼 추가*/ .btnType25{width:76px;height:26px;font-size:14px;line-height:1.5;background:#999;color:#fff;} .btnType.disabled{background:#e9e9e9 !important;color:#888 !important;border:0 !important;font-weight:400;border:0;pointer-events:none;} .btn_text{padding:0 7px;} .btn_28{height:28px;} .btn_30{height:30px;} .btn_32{height:32px;} .btn_34{height:34px;} .btn_36{height:36px;} .btn_38{height:38px;} .btn_blue.fill{background:var(--primary-color);color:#fff;} .btn_lightgray.fill{background:var(--lightgray-color);color:#fff;} .btn_gray.fill{background:var(--gray-color);color:#fff;} .btn_yellow.fill{background:var(--secondary-light-color);color:#222;} .btn_blue.border{border:1px solid var(--primary-color);color:var(--primary-color);} .btn_gray.border{border:1px solid #6a6c72;color:#666;} .btnType.fill_gray{background:#6a6c72;color:#fff;} .btnType.fill_lightgray{background:#8e8e8e;color:#fff;} .btnType.fill_blue{background:var(--primary-color);color:#fff;} .btnType.fill_lightblue{background:#b1c6ee;color:#222;} .btnType.fill_yellow{background:var(--secondary-color);color:#222;} .btnType.border_gray{border:1px solid #b1b1b1;color:#222;} .btnType.border_lightgray{border:1px solid #d5d5d5;color:#555;} .btnType.border_blue{border:1px solid var(--primary-color);color:var(--primary-color);} .btnType.border_lightblue{border:1px solid #b1c6ee;color:#222;} /* 기타 버튼 타입 */ button.excel_btn {border: 1px solid #129738 !important; color: #129738;} button.excel_btn:hover {border: 1px solid #09862d;color: #09862d;} button.print_btn {border: 1px solid #b1b1b1; color: #555;} button.pdf_btn {border: 1px solid #e40000 !important; color: #e40000;} button.txt_btn {border: 1px solid #53a6da !important; color: #53a6da; } button.txt_btn i {background-image: url(/publish/images/content/txt_img.png); width: 15px; height: 17px; margin: 0 3px 1px 0;} /*아이폰에서 버튼 텍스트가 파란색으로 나와서 추가 231024 button, html [type="button"] {-webkit-appearance: none;}*/ /* 기타 버튼 타입 아이콘 */ i.remove_img {background-image: url(/publish/images/content/remove_icon.png);width: 10px;height: 10px;margin: 0 3px 1px 0;} i.add_img {background-image: url(/publish/images/content/add_icon.png);width: 10px;height: 10px;margin: 0 3px 1px 0;} i.print_img {background-image: url(/publish/images/content/print_icon.png);width: 15px;height: 15px;margin: 0 3px 1px 0;} i.pdf_img {background-image: url(/publish/images/content/pdf_icon.png);width: 18px;height:20px;margin: 0 3px 1px 0;} i.uproad {background-image: url(/publish/images/content/excel_get.png); width: 21px; height: 18px;} i.downroad {background-image: url(/publish/images/content/excel_down.png); width: 21px; height: 18px;} i.refresh_img {background-image: url(/publish/images/content/refresh_icon.png);width:16px; height:18px;} .refresh_btn {background:#999; border-radius: 5px; font-size:0; height: 36px; width: 36px;}