.main_wrap { background-color: #f0effa; width: 100%; min-height: 100vh; position: relative; padding: 70px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } header { height: 70px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: absolute; top: 0; left: 0; width: 100%; z-index: 20; background-color: #f0effa; } header .logo { width: 180px; height: 26px; background: url(../images/admin-logo.png) no-repeat center/100% auto; font-size: 0; margin: 23px 0 0 23px; position: relative; } header .logo a { display: block; width: 100%; height: 100%; } header .logo span { font-size: 12px; position: absolute; right: -80px; bottom: 0; color: #b9b6d2; line-height: 1; letter-spacing: -0.025em; } header .user_wrap { font-size: 14px; color: #303035; position: relative; } header .user_wrap a { color: #303035; } header .user_wrap .user { display: -webkit-box; display: -ms-flexbox; display: flex; width: 308px; /*20220811 퍼블리싱 수정*/ height: 63px; background: url(../images/user-bg.png) no-repeat center/100% auto; } header .user_wrap .user p { position: relative; padding: 8px 12px 0 40px; margin-right: 12px; } header .user_wrap .user p:after { content: ''; width: 1px; height: 12px; background-color: #bab7d3; position: absolute; right: 0; top: 12px; } header .user_wrap .user .btn_user { padding: 8px 0 0 28px; position: relative; } header .user_wrap .user .btn_user:before { content: ''; position: absolute; top: 8px; left: 0; width: 20px; height: 20px; background: url(../images/user-icon.png) no-repeat center/100% auto; } header .user_wrap .user .btn_user:after { content: ''; position: absolute; top: 16px; right: -17px; width: 11px; height: 6px; background: url(../images/arrow-down.png) no-repeat center/100% auto; } header .user_wrap .user.clicked + .user_info { display: block; } header .user_wrap .user.clicked .btn_user:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } header .user_wrap .user_info { border: 1px solid #cbcbcb; background-color: #fff; -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.18); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.18); border-radius: 12px; width: 108px; /*20220901 퍼블 수정*/ -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 40px; right: 24px; display: none; } header .user_wrap .user_info a { display: -webkit-box; display: -ms-flexbox; display: flex; height: 50%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; } header .user_wrap .user_info .logout { color: #333333; padding: 15px 0; /*20220901 퍼블 수정*/ } .main_menu { overflow: hidden; background-color: #7572a5; border-radius: 24px; width: 240px; position: relative; margin-bottom: 25px; padding:25px 0; } .main_menu:before { content: ''; position: absolute; top: 0; left: 0; width: 50px; height: 100%; background-color: #34344f; border-radius: 25px; } .main_menu > li { padding: 0 0 0 50px; position: relative; } .main_menu > li > a { color: rgba(255, 255, 255, 0.5); font-size: 16px; display: block; position: relative; padding: 10px; transition: all 0.3s; } .main_menu > li > a:after { content: ''; position: absolute; top: 50%; right: 15px; transform-origin: center; transition: transform 0.3s; width: 11px; height: 6px; background: url(../images/arrow-white.png) no-repeat center/100% auto; opacity: 0.5; -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .main_menu > li.is-current > a { color: #fff; } .main_menu > li.is-current > a:before { opacity: 1; } .main_menu > li.is-current > a:after { opacity: 1; -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); } .main_menu > li.is-current .sub_menu { display: block; } .main_menu > li.is-current:last-child .sub_menu { margin-bottom: 0; } .main_menu .sub_menu { background-color: #fff; border-radius: 10px; padding: 18px 10px; transition: all 0.3s; } .main_menu .sub_menu > li { padding: 0 0 15px 5px; position: relative; } .main_menu .sub_menu > li:last-child { padding-bottom: 0; } .main_menu .sub_menu > li:before { content: ''; position: absolute; top: 7px; left: 0; width: 3px; height: 3px; background-color: #bcb8e1; } .main_menu .sub_menu > li > a { font-size: 14px; color: #68647a; display: block; } .main_menu .is-current .sub_menu > li:hover > a,.main_menu .is-current .sub_menu > li > a.selected { color:#000000; } /* 추가 */ .main_menu > li .menu_btn { position: absolute; left:0; top:0; font-size: 0; width: 50px; height: 43px; transition: all 0.3s; cursor: pointer; } .main_menu > li.customer .menu_btn { background: url(../images/icon-customer.png) no-repeat center/auto; } .main_menu > li.attract .menu_btn { background: url(../images/icon-attract.png) no-repeat center/auto; } .main_menu > li.service .menu_btn { background: url(../images/icon-service.png) no-repeat center/auto; } .main_menu > li.calculate .menu_btn { background: url(../images/icon-calculate.png) no-repeat center/auto; } .main_menu > li.channel .menu_btn { background: url(../images/icon-channel.png) no-repeat center/auto; } .main_menu > li.key .menu_btn { background: url(../images/icon-key.png) no-repeat center/auto; } .main_menu > li.moniter .menu_btn { background: url(../images/icon-moniter.png) no-repeat center/auto; } .main_menu > li.risk .menu_btn { background: url(../images/icon-risk.png) no-repeat center/auto; } .main_menu > li.stats .menu_btn { background: url(../images/icon-stats.png) no-repeat center/auto; } .main_menu > li.system .menu_btn { background: url(../images/icon-system.png) no-repeat center/auto; } .main_menu > li:hover > a { background: #646193; color: #fff; } .main_menu > li.customer:hover .menu_btn { background: url(../images/icon-customer-on.png) no-repeat center/auto #4a496c; } .main_menu > li.attract:hover .menu_btn { background: url(../images/icon-attract-on.png) no-repeat center/auto #4a496c; } .main_menu > li.service:hover .menu_btn { background: url(../images/icon-service-on.png) no-repeat center/auto #4a496c; } .main_menu > li.calculate:hover .menu_btn { background: url(../images/icon-calculate-on.png) no-repeat center/auto #4a496c; } .main_menu > li.channel:hover .menu_btn { background: url(../images/icon-channel-on.png) no-repeat center/auto #4a496c; } .main_menu > li.key:hover .menu_btn { background: url(../images/icon-key-on.png) no-repeat center/auto #4a496c; } .main_menu > li.moniter:hover .menu_btn { background: url(../images/icon-moniter-on.png) no-repeat center/auto #4a496c; } .main_menu > li.risk:hover .menu_btn { background: url(../images/icon-risk-on.png) no-repeat center/auto #4a496c; } .main_menu > li.stats:hover .menu_btn { background: url(../images/icon-stats-on.png) no-repeat center/auto #4a496c; } .main_menu > li.system:hover .menu_btn { background: url(../images/icon-system-on.png) no-repeat center/auto #4a496c; } .main_menu > li.customer.is-current .menu_btn { background-image: url(../images/icon-customer-on.png); } .main_menu > li.attract.is-current .menu_btn { background-image: url(../images/icon-attract-on.png); } .main_menu > li.service.is-current .menu_btn { background-image: url(../images/icon-service-on.png); } .main_menu > li.calculate.is-current .menu_btn { background-image: url(../images/icon-calculate-on.png); } .main_menu > li.channel.is-current .menu_btn { background-image: url(../images/icon-channel-on.png); } .main_menu > li.key.is-current .menu_btn { background-image: url(../images/icon-key-on.png); } .main_menu > li.moniter.is-current .menu_btn { background-image: url(../images/icon-moniter-on.png); } .main_menu > li.risk.is-current .menu_btn { background-image: url(../images/icon-risk-on.png); } .main_menu > li.stats.is-current .menu_btn { background-image: url(../images/icon-stats-on.png); } .main_menu > li.system.is-current .menu_btn { background-image: url(../images/icon-system-on.png); } .main_menu > li .sub_menu_wrap { padding:0 10px 10px; display:none; margin-top: 5px; } .main_menu > li.is-current .sub_menu_wrap { display: block; } .contents { padding: 0 57px; width: calc(100% - 240px); -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; } .contents_wrap { -webkit-box-shadow: 8px 8px 8px rgba(80, 80, 80, 0.08); box-shadow: 8px 8px 8px rgba(80, 80, 80, 0.08); background-color: #fff; width: 100%; border-radius: 24px; padding: 0 0 15px 0; margin-bottom: 70px; } .contents_wrap .search_form { padding: 0 40px; } .contents .top_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #d5d3e6; padding: 21px 0px 0 0px; margin: 0 40px 27px 40px; } .contents .top_wrap .title { font-size: 18px; color: #1b1b1b; letter-spacing: -0.025em; padding-bottom: 14px; border-bottom: 4px solid #eb008b; margin-bottom: -1px; } .contents .top_wrap .breadcrumb { font-size: 13px; color: #9493a1; letter-spacing: -0.025em; } .contents .top_tab { position: relative; margin: 0 40px; height: 45px; border-bottom: 1px solid #ddddeb; margin-bottom: 40px; display: flex; font-size: 16px; text-align: center ; } .contents .top_tab a.on { background: url("../images/tab_arrow.png") #fff no-repeat; background-position: 20px center; border: 1px solid #ddddeb; border-bottom: 1px solid #ffffff; color: #d82e89; font-weight: 500; } .contents .top_tab a.on:hover { background: url("../images/tab_arrow.png") #fff no-repeat; background-position: 20px center; border: 1px solid #ddddeb; border-bottom: 1px solid #ffffff; color: #d82e89; font-weight: 500; } .contents .top_tab a { background: #ececf3; border: 1px solid #ececf3; border-bottom: 1px solid #ddddeb; height: 45px;padding: 10px 20px; min-width: 180px; display: inline-block; border-radius: 9px 9px 0 0 ; cursor: pointer; color: #a5a5bd;font-weight: 500; } .contents .top_tab a:hover { background: #bdbde0; border: 1px solid #bdbde0; border-bottom: 1px solid #ddddeb; color: #ffffff;font-weight: 500; } .contents .search_wrap{ background-color: #f6f6f8; padding: 20px 30px 40px; border-radius: 4px; margin: 0 40px 50px 40px; /*20220811 퍼블리싱 수정*/ flex-wrap: wrap; } .contents .search_wrap, .contents .search_wrap .group{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .contents .search_wrap .group{ width: 100%; } .contents .search_wrap .term .group{ align-items: center; } .contents .search_wrap .group + .group{ margin-top: 20px; } .contents .search_wrap button.grey { background-color: #35354f; width: 122px; font-size: 18px; padding: 0 8px; margin-left: 0; } .contents .select_box{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-right: 10px; width: 13.67%; } .contents .select_box .label { font-size: 13px; letter-spacing: -0.025em; margin-bottom: 6px; color: #a3a3a3; } .contents select { width: 100%; height: 40px; border: 1px solid #c9c9c9; font-size: 14px; color: #000; border-radius: 4px; padding:0 10px; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none; background:#fff url('../images/icon-select-down.png')no-repeat right 10px center; } .contents .select_box option { color: #000; } .contents .NumberSe { float:right; min-width:90px; width:auto; margin-left:10px; margin-top:-7px; } .contents .input_box{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-right: 10px; width: 22.64%; } .contents .input_box .label { font-size: 13px; letter-spacing: -0.025em; margin-bottom: 6px; color: #a3a3a3; } .contents .input_box .label:focus { color: #000; } .contents .input_box input { width: 100%; height: 40px; border: 1px solid #c9c9c9; position: relative; background-color: #fff; border-radius: 4px; } .contents .input_box input::-webkit-input-placeholder { color: #c9c9c9; } .contents .input_box input:-ms-input-placeholder { color: #c9c9c9; } .contents .input_box input::-ms-input-placeholder { color: #c9c9c9; } .contents .input_box input::placeholder { color: #c9c9c9; } .contents table input { width: 100%; height: 40px; border: 1px solid #c9c9c9; position: relative; background-color: #fff; border-bottom: none; border-top: none; border-left: none; border-right: none; } .contents .id { position: relative; margin-left: 10px; } .contents .id:before { content: ''; position: absolute; top: 25px; left: -10px; width: 1px; height: 36px; background-color: #e8e8f1; } /* input cal + search-box*/ .w35{width:35%;} .contents .table.table_form.m50{margin-bottom: 50px;} .contents .input_box.cal{ display: inline-block; width: 27.34%; } .contents .input_box.cal label { display: block; } .contents .input_box.cal .txt{ display: inline-block; } .contents .input_box.cal p{ display: inline-flex; margin-left: 10px; } .contents .input_box.cal input { display: inline-block; width: 100%; float: left; background: url(../images/icon-calender.png) no-repeat right 6% center; background-color:#fff; } /*******************20220901 퍼블 수정*******************/ .contents .input_box.cal .term .icon_date{ width: 100%; } .contents .input_box.cal .term .icon_date:first-of-type{ margin-right: 2%; } .contents .input_box.cal .term .icon_date:nth-of-type(2){ margin-left: 2%; } /*******************************************/ .contents .input_box.cal.one{ width: 13.67%; } .contents .input_box.cal.one input{ width: 100%; } .contents .input_box.cal.one + .btn-a{ margin-right: 10px; } .contents .input_box.cal .term{ display: flex; justify-content: space-around; align-items: center; } .contents .input_box .search-box { background: #fff url(../images/icon-search.png) no-repeat 6% center/14px auto; padding-left: 43px; } .input-address input:nth-child(1){ width: 98px; } .input-address input:nth-child(2){ width: calc(100% - 480px); } .input-address input:nth-child(3){ width: 344px; } .input-bnumber input:nth-child(1){ width: 62px; } .input-bnumber input:nth-child(2){ width: 52px; } .input-bnumber input:nth-child(3){ width: 116px; } .input-double{ display: flex; } .input-memo{ margin: 5px 0; display: flex; } .input-double input, .button-double button{ width: calc(37.5% - 5px) !important; } .btn-a{ width: auto !important; display: inline-flex !important; } /*20220927 퍼블 수정*/ .input-memo .memo_text{ height: 240px !important; width: 84%; } .input-memo .button{ margin-left: 1%; width: 15% !important; } /**/ .contents .two-input{ display: inline-flex; align-items: flex-end; } .contents .two-input .input_box{ width: 100%; } .contents .button { height: 40px; color: #fff; border-radius: 4px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: none; min-width: 80px; margin-left: 10px; } .contents .button.grey { background-color: #35354f; font-size: 16px; padding: 0 15px; } .contents .button.grey:hover { background-color: #0a0b24; } .contents .button.blue { background-color: #333589; font-size: 16px; padding: 0 15px; } .contents .button.blue:hover { background-color: #0a0b24; } .contents .button.white { border: 1px solid #c9c9c9; font-size: 16px; background-color: #fff; color: #000; padding: 0 15px; } .contents .button.white:hover { border-color: #000; } /*icon button*/ .download::before { content:''; background: url(../images/icon-download.png) no-repeat 0 0; width:23px; height:23px; margin-right: 5px; } .add::before { content:''; background: url(../images/icon-add.png) no-repeat center center; width:24px; height:24px; margin-right: 5px; margin-top: 2px; } .del::before { content:''; background: url(../images/icon-del.png) no-repeat center center; width:24px; height:24px; margin-right: 5px; margin-top: 2px; } .contents .info { padding: 0 40px; margin-bottom: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .info .count { font-size: 16px; position: relative; padding-left: 10px; } .info .count span { color: #eb008b; } .info .count p{ color: #666666; font-size: 14px; display: inline-flex; } .info .count:before { content: ''; position: absolute; top: 10px; left: 0; width: 3px; height: 3px; background-color: #eb008b; } .contents .info .button_group { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: -7px; } .contents .info .title { font-size: 18px; position: relative; padding-left: 10px; margin-top: 9px; } .contents .info .title:before { content: ''; position: absolute; top: 10px; left: 0; width: 3px; height: 3px; background-color: #eb008b; } .contents .title_wrap{ display: flex; padding: 0 40px; margin-bottom: 20px; align-items: center; justify-content: space-between; } .contents .title_wrap .NumberSe{ flex-direction: row; align-items: center; width: 13.67%; } .contents .title_wrap .NumberSe p{ margin-right: 10px; } /*pagination*/ .pagination .arrow-btn button{ border:none; padding: 0 5px; } .btn-first, .btn-prev{ background:url(../images/icon-pgn-l.png) no-repeat; width:24px; height:24px; } .btn-next, .btn-last{ background:url('../images/icon-pgn-r.png') no-repeat; width:24px; height:24px; } .btn-first,.btn-last{background-position: 0px 0px;} .btn-first:hover, .btn-last:hover{background-position: 0px -48px;} .btn-prev, .btn-next{background-position: 0px -24px;} .btn-prev:hover, .btn-next:hover{background-position: 0px -72px;} .pagination { display:flex; justify-content: center; margin: 65px 0 50px 0; /*20220811 퍼블리싱 수정*/ } .pagination ul{ display:flex; align-items:center; } .pagination ul .active a{ color:#eb008b; text-decoration: underline; } .pagination ul li a{ color:#9a9a9a; font-size: 14px; padding: 0 15px; } .pagination ul li a:hover{ color:#000; text-decoration: underline; } .popup.popup_form .pagination{ margin-top:25px; } /*contents table 추가*/ /* arrow_box 반려사유 삭제 */ /* .contents .table table .arrow_box { display: none; background-color: #fff; border: #666666 solid 1px; border-radius: 4px; color: #666666; font-size: 14px; font-weight: 500; letter-spacing: -0.25px; margin-top: 16.8px; padding: 10px 20px; position: absolute; min-width: 120px; z-index: 100; left: 42px; } .contents .table table .arrow_box:before{ border-color: #666666 transparent; border-style: solid; border-width: 0 6px 8px 6.5px; content: ''; display: block; left: 20px; position: absolute; bottom: 100%; width: 0; z-index: 0; } .contents .table table .arrow_box:after { border-color: #fff transparent; border-style: solid; border-width: 0 6px 8px 6.5px; content: ''; display: block; left: 20px; position: absolute; bottom: 99%; width: 0; z-index: 1; } */ .contents .table.calculate table td, .contents .table.calculate table th{ border-left: 1px solid #dadae6; } .contents .table.calculate table td:nth-child(1), .contents .table.calculate table tr:nth-child(1) th:nth-child(1){ border-left: 0; } .contents .table.calculate.scroll{ width: calc(100% - 80px); overflow-x: auto; margin: 0 auto; margin-bottom: 60px; padding: 0 0 10px 0; } .contents .table.calculate.scroll table{ /*min-width: 1500px;*/ width:100%; table-layout: fixed; white-space: nowrap; } .contents .table table .total{ background-color: #ececf3; } .contents .table table td span {cursor: pointer;} .contents .table table td span:hover + p.arrow_box { display: block; } .contents .table.table_form .tr_input td{ padding: 0; } .contents .table.table_form .tr_input .td_radio{ padding-left: 10px; } .contents .table.table_form .radio .label_group label{ display: flex; height: 30px; align-items: center; } .contents .table { color: #333333; padding: 0 40px; margin-bottom: 65px; } .contents .table table { width: 100%; text-align: center; border-top: 2px solid #69677e; border-bottom: 1px solid #a4a4b0; table-layout: fixed; } .contents .table table thead { background-color: #f7f7f7; } .contents .table table tbody tr:last-child { border-bottom: none; } .contents .table table th { font-weight: 500; height: 50px; position: relative; font-size: 14px; } .contents .table table tr { padding: 10px; height: 50px; border-bottom: 1px solid #dadae6; } .contents .table table tbody tr:not(.table_form table tr):hover { background-color: #fafaff; } .contents .table table td { position: relative; font-size: 14px; } .contents .table table td a, .popup.popup_form table td a { text-decoration: underline; color: #333333; } .contents .table table td a:hover, .popup.popup_form table td a:hover { color: #eb008b; } .contents .table table td.stop { color: #a5a5a5; } .contents .table table td.price{ text-align: right; padding-right: 10px; } .contents .table table td.two_btn_group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 50px; } .contents .table table input[type="checkbox"] { display: none; } .contents .table table input[type="checkbox"] + label { width: 20px; height: 30px; display: block; background: url(../images/icon-chk-n-square.png) no-repeat center/100% auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .contents .table table input[type="checkbox"]:checked + label { background: url(../images/icon-chk-square.png) no-repeat center/100% auto; } .contents .table.table_form { font-size: 14px; margin-bottom: 24px; } .contents .table.table_form th { background-color: #f7f7f7; width: 11%; text-align: left; padding-left: 20px; font-size: 14px; } .contents .table.table_form th.center { text-align: center; padding-left: 0; } .contents .table.table_form td { text-align: left; padding-left: 10px;font-size: 14px; } .contents .table.table_form td.check { padding: 20px; width: 15%; vertical-align: text-top; } .contents .table.table_form td.check p { margin-bottom: 15px; } .contents .table.table_form input[type="checkbox"] + div > label:first-child { width: 20px; height: 30px; display: block; background: url(../images/icon-chk-n-square.png) no-repeat center/100% auto; margin-right: 10px; } .contents .table.table_form input[type="checkbox"]:checked + div > label:first-child { background: url(../images/icon-chk-square.png) no-repeat center/100% auto; margin-right: 10px; } .contents .table.table_form .label_group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .contents .table.table_form .tr_checkbox { border-bottom: none; } .contents .table.table_form .tr_checkbox .check:first-child { background-color: #f7f7f7; } .contents .table.table_form .tr_input input[type="text"], .contents .table.table_form .tr_input select { border: 1px solid #c9c9c9; border-radius: 4px; height: 40px; margin-left: 10px; font-size: 14px; } .contents .table.table_form .tr_input.w30 input[type="text"], .contents .table.table_form .tr_input.w30 select { width: 30%; } .contents .table.table_form .tr_input.w75 input[type="text"] { width: 75%; } .contents .table.table_form .tr_input.w100 input[type="text"] { width: 98%; } .contents .table.table_form input[type="radio"] + label:nth-child(2) { margin: 0 30px 0 0; } .contents .pop-btn2 { text-align: end; padding: 0 30px; margin-bottom: 9px; } .contents .pop-btn2 button { width: 160px; height: 42px; } .contents .pop-btn2 .btn-pcolor { margin-right: 8px; margin-left: 8px; } .contents .table.table_form .check.system .label_group{ height: 30px; } .contents .table.table_form .check.system .label_group label{ padding-left: 30px; margin:0; } .popup .pop-cont-detail { font-size: 16px; color: #666666; border-radius: 12px; background-color: #f5f6f8; padding: 15px; margin-top: 13px; width: 100%; } .popup .pop-cont-detail li { position: relative; padding-left: 10px; } .popup .pop-cont-detail li:before { content: ''; position: absolute; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); left: 0; width: 2px; height: 2px; background-color: #c7c7c7; } .popup{ font-family: 'SpoqaHanSansNeo'; } .popup.popup_form { width: 525px; } .popup.popup_form .info { margin-bottom: 12px; padding: 0; } .popup.popup_form .pop-head { border-bottom: 1px solid #d5d3e6; padding-bottom: 1px; margin-bottom: 25px; } .popup.popup_form .pop-tit { display: inline-block; border-bottom: 4px solid #eb008b; padding-bottom: 20px; margin-bottom: -1px; } .popup.popup_form .popup-btn1, .popup.popup_form .popup-btn2 { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .popup .popup-btn2 button:last-child{ margin-left: 8px; } .popup .pop-btn2 button:last-child{ margin-left: 8px; } .popup.popup_form table { width: 100%; border-top: 1px solid #dadae6; border-bottom: 1px solid #dadae6; } .popup.popup_form table tr { border-bottom: 1px solid #dadae6; height: 50px; } .popup.popup_form .table-c tr:hover{ background-color: #fafaff; } .popup.popup_form table tr:last-child { border-bottom: none; } .popup.popup_form table th { width: 30%; background-color: #f7f7f7; font-size: 16px; color: #333333; text-align: left; padding-left: 20px; } .popup.popup_form table td { padding: 0 0 0 10px; } .popup input { width: 100%; height: 40px; border: 1px solid #c9c9c9; border-radius: 4px; font-size: 16px; } .popup input::-webkit-input-placeholder { color: #c9c9c9; } .popup input:-ms-input-placeholder { color: #c9c9c9; } .popup input::-ms-input-placeholder { color: #c9c9c9; } .popup input::placeholder { color: #c9c9c9; } .popup.popup_form table input[type="radio"] + label { font-size: 16px; vertical-align: text-top; } .popup.popup_form table input[type="radio"] + label:nth-child(2) { margin-right: 40px; } .popup.popup_form table select { width: 100%; height: 40px; border: 1px solid #c9c9c9; border-radius: 4px; padding: 0 10px; font-size: 16px; color: #333333; appearance: none; background: #fff url(../images/icon-select-down.png)no-repeat right 10px center; } .popup .input_search { height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .popup .input_search input[type="text"] { position: relative; background: url(../images/icon-search.png) no-repeat 6% center/14px auto; background-color: #fff; padding-left: 40px; border-radius: 4px; width: 72%; } .popup .input_search input[type="text"]::-webkit-input-placeholder { color: #c9c9c9; } .popup .input_search input[type="text"]:-ms-input-placeholder { color: #c9c9c9; } .popup .input_search input[type="text"]::-ms-input-placeholder { color: #c9c9c9; } .popup .input_search input[type="text"]::placeholder { color: #c9c9c9; } .popup .button { height: 40px; color: #fff; border-radius: 4px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: none; min-width: 80px; margin-left: 10px; font-weight: 500; } .popup .button.Ty02 { margin-left: 0px; padding: 0 20px; } /*customer popup*/ .popup.b-popup{ width:700px; } .popup.price table th{ width:20%; padding:0; text-align: center; } .popup.price table td{ padding: 0; text-align: center; } .popup label{ font-size: 13px; letter-spacing: -0.025em; margin-bottom: 6px; color: #333333; } .popup input.h200{ height: 200px; margin: 10px 0; } .popup .number{ color:#000000; font-weight: bold; } .popup .number.blue{color:#0073d4;} .popup .red{color:#ff3600;} .popup.popup_form .table-c{ table-layout: fixed; margin-top: 10px; } .popup.popup_form .table-c th, .popup.popup_form .table-c td{ padding: 0; text-align:center; } .popup.b-popup tr th:nth-child(1){ width:60%; } .popup.b-popup tr th:nth-child(2){ width:10%; } .popup.b-popup tr th:nth-child(3), .popup.b-popup tr th:nth-child(4){ width:15%; } .popup.b-popup tr .memo{ text-align: left; padding: 5px 0 5px 10px; } .popup.b-popup tr:nth-child(n) .memo:nth-child(n){ height: 100px; display: block; overflow: auto; } .popup .pop-cont.bottom{ margin-top: 20px; } .popup.popup_form .popup-btn2 .download { display: flex; justify-content: center; align-items: center; } .popup.popup_form .popup-btn2.bulk{ justify-content: space-between; margin-bottom: 20px; } .popup.popup_form .popup-btn2.bulk button{ width: 49%; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: normal; font-size: 16px; padding: 0; } /**********************20220715 퍼블 수정**********************/ .popup.popup_form .popup-btn2.bulk button:nth-of-type(1)::before{ content: ''; background: url(../images/icon-f-download.png) no-repeat 0 0; width: 23px; height: 23px; margin: 2px 5px 0 15px; } .popup.popup_form .popup-btn2.bulk button:nth-of-type(2)::before{ content: ''; background: url(../images/icon-f-upload.png) no-repeat 0 0; width: 23px; height: 23px; margin: 2px 5px 0 15px; } /****************************************************************/ .popup.popup_form .attach{ display: flex; align-items: center; flex-wrap: wrap; padding: 5px 0; } .popup.popup_form .attach button{ margin: 0 10px 0 0; width: 35%; } .popup.popup_form .attach .list{ width: 100%; padding-bottom: 5px; font-size: 16px; } .popup.popup_form .attach .file{ padding:0; } .popup.popup_form .file{ color: #656565; display: inline-flex; align-items: center; font-size: 14px; padding-top: 5px; } .popup-btn2.bulk + .file{ margin-bottom: 18px; padding-bottom: 0; } .popup.popup_form .file button{ background: #e4e4e4; width: 15px; height: 15px; border-radius: 50%; border: none; font-size: 10px; margin: 0 0 0 5px; } .popup.popup_form.w700{ width:700px; } .popup.popup_form.register table th{ width:42%; font-size: 14px; } .popup.popup_form.register .input_search input{ width:100%; } .popup.popup_form.register .input_add{ padding: 5px 0px 5px 0px; } .popup.popup_form.register .input_add div{ display: flex; justify-content: space-between; width:100%; } .popup.popup_form.register .input_add div input:nth-child(1){ margin-right: 5px; width: 95px; } /********** 20220901 삭제 버튼 추가 ************/ .input_add .button.add, .input_add .button.min{ min-width: 40px; margin-left: 2%; } .input_add .button.add::before{ margin:0px; background: url(../images/icon-add-b.png) no-repeat center center; } .input_add .button.min::before{ content: ''; position: absolute; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); right: 44px; width: 12px; height: 1px; border-radius: 1px; background: #000; } .popup.popup_form.register .input_add div+div{ padding-top: 5px; } .popup.popup_inside{ max-height: 60vh; } .popup.popup_inside .pop-head{ left: 0px; } .popup .button.white{ background-color: #fff; border-radius: 6px; border: 1px solid #a1a1a1; font-size: 16px; color: #000; } .popup .button.white:hover{ border-color: #000; } .popup.popup_form .pop-foot{ margin-top: 15px; } .popup.popup_form.register .pop-foot p:nth-child(1){ font-weight: 700; } .popup.popup_form .pop-btn3 button{ width: 25%; } .popup.popup_form .pop-btn3 button:nth-child(2){ margin-left: 10px; } .popup.popup_form .pop-btn3 .btn-p2color:hover{ background-color: #000; } .popup.popup_form table .two-tit{ padding: 10px 0 10px 20px; } .popup.popup_form table .sender{ padding: 15px 0px 15px 10px; } .popup.popup_form table .sender-head{ display: flex; justify-content: space-between; padding: 5px 0; } .popup.popup_form table .sender-head .count span{ color: #eb008b; padding-left: 2px; } .popup.popup_form table .radio_group input[type="radio"] + label:nth-child(2){ margin-right: 10px; } .popup.popup_form table .radio_group input[type="radio"] + label{ font-size: 14px; } .popup.popup_form table .sender ul{ margin-top: 10px; display: flex; flex-wrap: wrap; } .popup.popup_form table .sender ul li{ display: inline-flex; justify-content: space-between; width: 100%; align-items: center; } .popup.popup_form table .sender ul li:not(:last-child){ margin-bottom: 5px; } .popup.popup_form table .sender ul .select-btn{ display: inline-flex; width: 50%; justify-content: space-between; } .popup.popup_form .select-btn button{ width: 48%; height: 30px; font-size: 16px; font-weight: 400; letter-spacing: -1.1px; border-radius: 4px; } .popup.popup_form .memo_text{ width: 300px; } /********** 20220728 퍼블 수정 ************/ .popup.popup_form table .registration{ padding: 10px 20px 0 20px; } .popup.popup_form table .registration ul{ display: flex; width: 100%; flex-wrap: wrap; } .popup.popup_form table .registration ul li{ width: 32%; max-width: 144px; margin-right: 2%; font-size: 16px; margin-bottom: 2%; } /* --- 삭제 .popup.popup_form table .registration ul li:nth-child(3n){ margin-right: 0; } */ .popup.popup_form table .registration ul li span{ min-height: 30px; max-height: 160px; overflow: hidden; border: 1px solid #000; padding: 5px 10px; border-radius: 5px; position: relative; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; } .popup.popup_form table .registration ul li span a img{ position: absolute; right: 0px; top: 4px; } /*********************/ .popup.popup_form table .input_add{ display: flex; justify-content: space-between; padding: 5px 0px 5px 10px; flex-wrap: wrap; } .popup.popup_form table .input_add input{ width: 85%; } .popup .input_search input + .button.btn-p2color{ width:25% !important; } .essential{ display: flex; align-items: flex-start; } /*******************20220718 퍼블 수정*******************/ .essential label span{ color:#eb008b; padding-right: 3px; } /**************************************/ textarea{ resize: none; min-height: 100px; padding: 10px; font-family: 'SpoqaHanSansNeo'; font-weight: 500; font-size: 14px; border: 1px solid #c9c9c9; border-radius: 4px; } textarea:focus{ outline: 1px solid #000; } /*toggle*/ /***************20220715 퍼블 수정******************/ .contents .table table input[type="checkbox"] + label.toggle_switch { width: 72px; height: 28px; border-radius: 14px; border: 1px solid #b7b9be; background: #cecece; transition: all 0.3s; cursor: default;} .contents .table table input[type="checkbox"] + label.toggle_switch:before { content:"미사용";position: absolute; display: block; width: 100%; height:100%; font-size: 14px; color:#fff; line-height: 28px; padding: 0 0 0 15px; font-family: 'SpoqaHanSansNeo', sans-serif; box-sizing: border-box; transition: all 0.3s; } .contents .table table input[type="checkbox"] + label.toggle_switch:after { content:""; position: absolute; display: block; width:14px; height: 14px; top:50%; left: 7px; transform: translateY(-50%); background: #fff; border-radius: 100%; transition: all 0.5s; } .contents .table table input[type="checkbox"]:checked + label.toggle_switch { border-color:#eb008b; background:#fff; } .contents .table table input[type="checkbox"]:checked + label.toggle_switch:before { content:"사용"; color:#eb008b; padding: 0 15px 0 0; } .contents .table table input[type="checkbox"]:checked + label.toggle_switch:after { background: #eb008b; left: 45px;} /*datepicker*/ .datepicker{position: absolute; top: 336px; left: 381px; z-index: 1; display: block; padding: 24px 0; border: 1px solid #eceff1; background: #fff;box-shadow: 0 2px 4px 0 rgb(0 0 0 / 16%);border-radius: 5px;} .datepicker .datepicker-head{margin-bottom: 28px;} .datepicker .datepicker-title{text-align: center; font-size: 20px;} .datepicker .datepicker-calender{margin: 0 30px; font-size: 12px;} .datepicker .datepicker-calender td{padding: 7.5px; line-height: 15px;} .datepicker .datepicker-calender td a{text-align: center; width: 15px; height: 15px; display: inline-block; color:#000;} .datepicker .datepicker-calender tr td:last-child a{color:#5d7aff;} .datepicker .datepicker-calender tr td:first-child a{color:#ff2e76;} .datepicker .datepicker-head .datepicker-btn span{position: relative;} .datepicker .datepicker-head .datepicker-prev span::after{position: absolute; left: 70px; top: 10px; content: ''; width: 10px; height: 10px; border-top: 2px solid #5f5f5f; border-right: 2px solid #5f5f5f; transform: rotate(225deg);} .datepicker .datepicker-head .datepicker-next span::after{position: absolute; left: 185px; top: 10px; content: ''; width: 10px; height: 10px; border-top: 2px solid #5f5f5f; border-right: 2px solid #5f5f5f; transform: rotate(45deg);} .datepicker .datepicker-calender td:hover:not(.disabled){background-color: #efefef; border-radius: 50%;} .datepicker .datepicker-calender td:hover a{color:#000;} .datepicker .datepicker-calender .today{background-color: #7c7c7c; border-radius: 50%;} .datepicker .datepicker-calender .click{background-color: #eb008b; border-radius: 50%;} .datepicker .datepicker-calender .click a, .datepicker .datepicker-calender .today a{color: #fff;} .datepicker .datepicker-calender .disabled a{color:#c9c9c9 !important;} /*# sourceMappingURL=style.css.map */ /* loadingPage */ .loadingDimmed { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.2); z-index: 400; } .sp-3balls, .sp-3balls:before, .sp-3balls:after { display: inline-block; width: 18px; height: 18px; background: #946dc2; border-radius: 100%; } .sp-3balls { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; opacity: 1; animation: spScaleAlpha 2s infinite linear; } .sp-3balls:before, .sp-3balls:after { content: ""; position: absolute; opacity: 0.25; } .sp-3balls:before { right: 30px; animation: spScaleAlphaBefore 2s infinite linear; } .sp-3balls:after { left: 30px; animation: spScaleAlphaAfter 2s infinite linear; } @keyframes spScaleAlpha { 0% { opacity: 1; } 33% { opacity: 0.25; } 66% { opacity: 0.25; } 100% { opacity: 1; } } @keyframes spScaleAlphaBefore { 33% { opacity: 0.25; } 66% { opacity: 1; } 100% { opacity: 0.25; } } @keyframes spScaleAlphaAfter { 0% { opacity: 0.25; } 33% { opacity: 1; } 66% { opacity: 0.25; } }