/*가이드에서만 쓰이는 레이아웃 스타일*/ @charset "utf-8"; @import '_mixin.scss'; /*template*/ footer { position: fixed; width: 100%; bottom: 0; z-index: 200; } .main_back { position: absolute; width: 100%; height: 100%; overflow: hidden; } .main_wrap { position: relative; width: 100%; height: 100%; background: var(--bg_02_template); &.main { height: auto; min-height: 100%; overflow: hidden; padding: 16px; padding-top: 88px; padding-left: 244px; } } .main_contents { width: 100%; height: 100%; position: relative; // background: url("../images/background_img.png"); background-repeat: no-repeat; background-size : cover; &.login_ver1 { @include dflx_ac_jend; background: url("../images/login_dark_ver1.png") no-repeat; background-size : cover; } &.error { @include dflx_ac_jcent; background: url("../images/error_background_img.png") no-repeat center center; background-size : cover; } &.error2 { @include dflx_ac_jcent; background-color: #050A1F; background: url("../images/error2_background_img.png") no-repeat center bottom; background-size: contain; } } .login_wrap { @include dflx_ac_jcent; position: relative; width: 794px; height: 100%; padding: 48px; border-left: 1px solid rgba(255, 255, 255, 0.20); background-color: var(--alpha-wh-to-bkwh-60); box-shadow: -12px 0px 40px 0px rgba(0, 0, 0, 0.40); backdrop-filter: blur(30px); } .login_logo { position: absolute; height: 120px; bottom: 42px; left: 42px; } .box_line { &.left { position: absolute; top: 3.5rem; left: 1.25rem; z-index: 100; } &.right { position: absolute; top: 3.5rem; right: 1.25rem; z-index: 100; } } .infowindow_box { &.main { top: auto; bottom: calc(100% + 0.125rem) !important; left: 50%; transform: translate(-50%, 0); position: absolute; } } // scroll .scroll { &.sc_y { &.table { height: 8.25rem; padding: 0; } &.signal { padding: 0; margin-right: 0.5rem; } } } // accordion .accordion_paragraph { &.signal { padding: 0 0.75rem 1.25rem 1.25rem; height: 16.75rem; } } .footer_in { @include dflx_as_jbet; width: 100%; padding-left: 1.25rem; padding-right: 1.25rem; padding-bottom: 1.25rem; } // table .table_box { &.signal { tr { &.selected, &:focus, &.hover { background: rgba(39, 212, 255, 0.2); } } th { position: static; height: 1.75rem; } th, td:not(.disable), td:not(.disabled) { border-right: 0.063rem solid rgba(255, 255, 255, 0.12); &:last-child {border-right: 0;} } td { height: 1.75rem; border-top: 0.188rem solid $bg_default !important; p { text-align: center !important; cursor: pointer; } } } } .arrow { &.left {transform: rotate(180deg);} &.up {transform: rotate(270deg);} &.down {transform: rotate(90deg);} } .login_box { @include dflx_ac_jcent; // top: 33%; // left: 30%; &.login { z-index: 0; width: 44.563rem; padding: 3rem; border-radius: 0.125rem; border: 0.063rem solid rgba(255, 255, 255, 0.21); background: var(--bg_01_80); backdrop-filter: blur(3.75rem); } } .light_box { position: absolute; top: 0; right: 0; margin-right: 20px; margin-top: 8px; } .error_box { @include dflx; @include backFilter; position: absolute; padding: 3rem; top: 33%; left: 30%; z-index: 0; width: 44.563rem; height: 18.25rem; border-radius: 0.125rem; border: 0.063rem solid rgba(255, 255, 255, 0.21); background: rgba(162, 164, 184, 0.20); backdrop-filter: blur(3.75rem); } .marker_main { position: absolute; bottom: 40%; left: 50%; } .indicator{ &.main { padding: 1.25rem 0.6rem 1.25rem 1.25rem; } &.signal { padding: 0; } } .indi_conts { &.del {display: none} &.signal {margin: 0} } .tmbox_text { @include fs_14_medium; line-height: 1.3; } .tmbox{ &.signal { background-color: transparent; padding: 0; margin-bottom: 1.25rem; } } // 프로필 .hd_profile{ position: relative; width: 1.875rem; height: 1.25rem; .member_popover{ display: none; } &.profile_open{ .member_popover, .member_toggle{ display: block; } .btn_profile .comma_under8 { opacity: 1; transform: rotate(180deg); } .profile20{ opacity: 1; } } } // 마커 .marker_main { .tooltip_parents, .infowindow_box.main.on{ display: none; } &.marker_hide { .tooltip_parents, .infowindow_box.main.on{ display: block; } .img_off {display: none;} .marker_img_selected {display: block;} } } .fab_wrap{ position: absolute; top: 0%; left: 108%; margin-left: 0.5rem; } // 범례 .popover_box { &.main { position: absolute; display: none; bottom: 3rem; left: -2.5rem; z-index: 100; &.legend { display: block; } &.pop { display: block; } &.pop_hide { display: none; } } } // 신호최적화 .signal_board { width: 100%; height: 100%; } .signal_content { @include dflx_ac_jcent; column-gap: 1rem; width: 100%; height: 100%; background: var(--bg_02_template); } .signal_body { position: relative; width: 100%; height: 100%; background-image: url("../images/signal_body_img.png"); background-repeat: no-repeat; background-size : cover !important; } .accordion_box { position: absolute; margin-top: 0.5rem; } .indi_top { &.signal { height: 3.5rem; padding: 1.25rem 1rem 1.25rem; } } .signal_dl { @include dflx_ac; //width: 100%; margin: 0.5rem 0; &:last-child { margin-bottom: 0; } dt { @include fs_13_light; @include dflx_jbet; width: 4rem; padding: 0 1rem 0 0; color: var(--white-w_87-sec); } dd { @include dflx_ac_jbet; flex: 1; column-gap: 0.25rem; .wrput{ width: 100%; } .ch_radio:last-child{ padding: 0; } } &.check { margin: 1rem 0; } } // accordion .accordion_block { // 포인트 &.signal { @include backFilter; .accordion_title:hover:not(.levle2), .hover.accordion_title, .accordion_title:focus { background: var(--primary-pri_20); cursor: pointer; } .accordion_title { background: var(--primary-pri_20); &:hover:not(.disabled), &:hover:not(.point.disabled), &:focus:not(.disabled) { background: var(--primary-pri_20); } } .accordion_contents { background: $bg_grey06; } .accordion_contents.signal { padding: unset; } } } // map label .map_label_line { @include dflx_ac_jcent; position: absolute; width: 100%; bottom: 1.5rem; padding: 0.125rem 0.75rem; } .map_label { @include fs_20_bold; width: auto; padding: 0.125rem 0.75rem 0.25rem; background-color: #0B1129; } // 상황관리이력 .record_wrap { width: 100%; height: 100%; padding-top: 5rem; } .record_content { width: 100%; height: 100%; padding: 1.25rem; display: grid; grid-auto-rows: 25.75rem auto; row-gap: 1rem; } .record_box { width: 100%; height: 100%; border: 0.063rem solid var(--line-pri_40-to-wh_40); background: var(--bg_01_80); box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16); backdrop-filter: blur(1.875rem); padding: 0 1.25rem 1.25rem 1.25rem; } .record_title { @include fs_16_bold; width: 100%; padding: 1.25rem 1rem 1rem 0; color: #27D4FF; } .record_box_content { display: flex; column-gap: 1rem; width: 100%; height: calc(100% - 3.25rem); } .record_grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 2fr 1.5fr; grid-template-rows: 8.125rem auto; column-gap: 1rem; row-gap: 1rem; width: 100%; height: 100%; } .record_top { display: grid; grid-column-gap: 1rem; width: 9rem; } .chart_cont_box { height: 100%; width: 9rem; } .diagon_cont_box { display: grid; grid-column-gap: 1rem; } .diagon_cont { &.record { width: 9rem; height: 4.875rem; } } .situation_box { padding: 0.75rem; border-radius: 0.125rem; background: var(--more-visible-wh_6-to-100); &.chart { @include dflx_dcol_jbet; grid-row: 1/3; } &.case1 { grid-row: 1/2; grid-column: 5/6; } &.case2 { grid-row: 1/2; grid-column: 6/7; } &.event { display: grid; grid-column: 5/7; grid-template-columns: 1.5fr 1fr; } h4{ @include fs_14_medium; color: var(--white-w_87); } } .case_wrap { @include dflx; column-gap: 0.5rem; width: 100%; height: calc(100% - 1.125rem); } .case_box { padding: 0.25rem; border-radius: 0.125rem; background: var(--white-w_6); width: 100%; .case_number { @include dflx_ac_jcent; width: 100%; height: calc(100% - 0.875rem); color: var(--white-w_87); } } .case_grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 0.5rem; row-gap: 0.5rem; } .chart_box { @include dflx_ac_jcent; height: calc(100% - 0.875rem); column-gap: 2.5rem; } .rate_content { display: grid; row-gap: 1rem; height: calc(100% - 3.25rem); } .rate_box { padding: 0.75rem; border-radius: 0.125rem; background:$bg_grey06; height: 100%; width: 100%; } .ch_label{ @include dflx_ac; .word{ @include fs_11_regular; color: rgba(255, 255, 255, 0.87); margin: 0.25rem 0 0.25rem 0.25rem; line-height: 1.1; word-break: keep-all } } .chart_cont{ @include dflx_ac_jcent; position: relative; width: 9rem; height: 4.891rem; padding: 0.5rem; overflow: hidden; background: url(../images/bg_tract.svg) no-repeat left top; background-size: 100% 100%; .chart_tlt { position: absolute; left: 1.25rem; top: 1.25rem; margin-bottom: 0.5rem; } .chart_result{ padding: 1rem 0 0; } } .chart_tlt{ @include fs_14_medium; color: $ui_sky; &.cover { width: 86%; padding: 0.75rem 0 0 0.75rem; background: url(../images/bg_tract_top.svg) no-repeat left top; background-size: 100% auto; } } .chart_result{ @include dflx_ae; color: $ui_sky; font-size: 1.5rem; font-weight: 700; column-gap: 0.375rem; .unit{ @include fs_14_regular; line-height: 1.7; } } // check box .record_radio { @include dflx_ac; cursor: pointer; .word { color: rgba(255, 255, 255, 0.87); } &.on { .radio { background-color: #fff; border: 0.25rem solid #27d4ff; } .word { color: rgba(255, 255, 255, 0.87); } } .radio { display: inline-block; width: 0.9375rem; height: 0.9375rem; background-color: rgba(255, 255, 255, 0.7); border-radius: 100%; margin: 0 0.5rem 0 0; &.mini{ width: 0.625rem; height: 0.625rem; border: 0.125rem solid #27d4ff; margin: 0 0.375rem 0 0; } &.green {border: 0.125rem solid #16D9AB} &.blue {border: 0.125rem solid #07F} &.dark_blue {border: 0.125rem solid #0E44E5} &.purple {border: 0.125rem solid #8972FF} &.dark_purple {border: 0.125rem solid #6E3DFF} } .word { @include fs_11_light; } } // 사용자 관리 user .user_wrap { width: 100%; height: 100%; padding-top: 2.5rem; } .user_content { display: flex; column-gap: 1rem; width: 100%; height: 100%; padding: 1.25rem; } .personal_box, .system_box { @include backFilter; width: 100%; height: 100%; border: 0.063rem solid rgba(39, 212, 255, 0.40); background: var(--bg_01_80); box-shadow: 0.25rem 0.25rem 1rem 1rem rgba(4, 9, 26, 0.16); width: 28.625rem; } .user_box { @include backFilter; width: 100%; height: 100%; border: 0.063rem solid rgba(39, 212, 255, 0.40); background: var(--bg_01_80); box-shadow: 0.25rem 0.25rem 1rem 1rem rgba(4, 9, 26, 0.16); flex: 1; } .table_inner { width: 100%; height: calc(100% - 2.625rem); padding: 0.875rem 1.25rem 1.25rem 1.25rem; } .title_box { @include dflx_ac_jbet; flex-wrap: wrap; padding: 1.25rem 1rem 0 1.25rem; } .user_title { @include fs_16_bold; color: var(--primary-to-grayscale-to-bk); height: 1.5rem; } .user_btn { height: 1.75rem; padding: 0.5rem 0; word-break: keep-all; } // error .error_logo { position: absolute; top: -10%; left: 50%; transform: translate(-50%, 0); z-index: 1; // width: 4.5rem; } // logo .logo_login { width: 12.5rem; } // 프로필 .hd_profile{ position: relative; width: 1.875rem; height: 1.25rem; .member_popover{ display: none; } &.profile_open{ .member_popover, .member_toggle{ display: block; } .btn_profile .comma_under8 { opacity: 1; transform: rotate(180deg); } .profile20{ opacity: 1; } } } /* html data-theme */ html[data-theme=light] { .main_contents { width: 100%; height: 100%; background-size : cover !important; background: url("../images/background_light_img.png") no-repeat center center; } } /* html data-theme End */ // netz 참고 // @import url('https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css'); // @import "_helper.scss"; // @import "_kit.scss"; // @import "_mixin.scss"; /*reset*/ *{box-sizing:border-box;} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: top; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } html,body{ font-size: 1rem; } body { margin:0px;padding:0px; background:#fff; font-family:"Malgun Gothic","맑은 고딕","Helvetica","AppleGothic",sans-serif; font-family:'Spoqa Han Sans Neo', 'sans-serif'; font-weight:400; line-height: 1.3; color: #000000; letter-spacing:0px; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } img{ max-width:100%; } img.nomax{ max-width: fit-content; } a {text-decoration:none;cursor:pointer; outline:none; color:#3b3b3b;} a:visited{text-decoration:none;} a:active{text-decoration:none;} a:link{text-decoration:none;} a:focus, a:hover {text-decoration:none;} input{outline:none; border:none; font-family:'Spoqa Han Sans Neo', 'sans-serif'; color: #000; -webkit-appearance: none; -moz-appearance: none; appearance: none;} button{outline:none; border:none; font-family:'Spoqa Han Sans Neo', 'sans-serif'; cursor: pointer;} select {outline: none; border: none;font-family: "Spoqa Han Sans Neo", sans-serif; cursor: pointer;} textarea{outline:none; border:none; font-family:'Spoqa Han Sans Neo', 'sans-serif'; color: #000;} select::-ms-expand {display: none;} .tal{text-align: left !important;} .tac{text-align: center !important;} .tar{text-align: right !important;} .dpblock{display: block !important;} .dpinblock{display: inline-block !important;} .dflx{display: flex !important;} .dgrid{display: grid !important;} .fleft{float:left !important;} .fright{float:right !important;} .lett_sp1 {letter-spacing: 1px !important;} .lett_sp2{letter-spacing: 2px !important;} .lett_sp3{letter-spacing: 3px !important;} .cl{clear:both;} .pos_rel{position: relative !important;} .pos_ab{position: absolute !important;} .bold{font-weight: bold !important;} .blue{color: #3ba1fd;} .red{color: #f55;} .hauto{height: auto !important;} input[type=text]::-webkit-input-placeholder{color:rgba(0, 0, 0, 0.5);} input[type=text]::-moz-placeholder{color:rgba(0, 0, 0, 0.5);} input[type=text]:-ms-input-placeholder {/* Internet Explorer 10-11 */color:rgba(0, 0, 0, 0.5);} input[type=text]::-ms-input-placeholder {/* Microsoft Edge */color:rgba(0, 0, 0, 0.5);} input[type=password]::-webkit-input-placeholder{color:rgba(0, 0, 0, 0.5); letter-spacing: 0.5px;} input[type=password]::-moz-placeholder{color:rgba(0, 0, 0, 0.5); letter-spacing: 0.5px;} input[type=password]:-ms-input-placeholder {/* Internet Explorer 10-11 */color:rgba(0, 0, 0, 0.5); letter-spacing: 0.5px;;} input[type=password]::-ms-input-placeholder {/* Microsoft Edge */color:rgba(0, 0, 0, 0.5); letter-spacing: 0.5px;} input[type=password]{letter-spacing: 1.5px;} textarea::-webkit-input-placeholder{color:rgba(0, 0, 0, 0.5);} textarea::-moz-placeholder{color:rgba(0, 0, 0, 0.5);} textarea:-ms-input-placeholder {/* Internet Explorer 10-11 */color:rgba(0, 0, 0, 0.5);} textarea::-ms-input-placeholder {/* Microsoft Edge */color:rgba(0, 0, 0, 0.5);} body::-webkit-scrollbar{ -webkit-appearance: none; background: transparent; width:7px; } body::-webkit-scrollbar-thumb{ background-color:rgba(0, 0, 0, 0.4); border-radius: 50px; } body::-webkit-scrollbar-track{ background-color: transparent; background-color:rgba(0, 0, 0, 0.2); } body::-webkit-scrollbar-corner { background-color: transparent; } body::-webkit-scrollbar:horizontal{ cursor: pointer; height:6px; } .op03 { opacity: 0.3 !important; } .op04 { opacity: 0.4 !important; } .op05 { opacity: 0.5 !important; } .op06 { opacity: 0.6 !important; } .op07 { opacity: 0.7 !important; } .op1 { opacity: 1 !important; } .dpblock { display: block; } .dpinblock { display: inline-block; } .dpinline { display: inline; } .dpnone { display: none; } .dflx_as { display: flex; align-items: flex-start; } .dflx_ac { display: flex; align-items: center; } .dflx_ae { display: flex; align-items: flex-end; } .dflx_jbet { display: flex; justify-content: space-between; } .dflx_dcol_jbet { display: flex; flex-direction: column; justify-content: space-between; } .dflx_jstart { display: flex; justify-content: flex-start; } .dflx_jcent { display: flex; justify-content: center; } .dflx_jend { display: flex; justify-content: flex-end; } .dflx_ac_jcent { display: flex; align-items: center; justify-content: center; } .dflx_as_jbet { display: flex; align-items: flex-start; justify-content: space-between; } .dflx_ac_jbet { display: flex; align-items: center; justify-content: space-between; } .dflx_ae_jbet { display: flex; align-items: flex-end; justify-content: space-between; } .dflx_ac_jend { display: flex; align-items: center; justify-content: flex-end; } /*reset End*/ .back { // background-color: $bgfff; // color: $col000; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 1; } .Dash_body{ background-color:#F0F0F2; width: 100%; min-height: 100%; overflow: hidden; padding: 1rem; padding-top: 5.5rem; padding-left: 16.5625rem; //transition: 0.2s all; &.respon{ padding-left: 112px; padding-left: 7rem; } } @keyframes in-header { from { opacity: 0; top:-70px; } to { opacity: 1; top: 0px; } } .header_bg{ background-color: #F0F0F2; position: fixed; left: 0px; top: 0px; width: 100%; padding: 1rem 1rem 0px; z-index: 100; &.trans{ background-color: transparent; } &.animate{ animation: in-header 1s ease-in-out !important; } } header { width:100%; height: 56px; height: 3.5rem; padding:8px 20px; padding: 0.5rem 1.25rem; // background: $bgdb; // border: 1px solid #000; border-radius: 10px; } .header_in{ @include dflx_ac_jbet; width: 100%; height: 100%; } .header_logo{ cursor: pointer; a{ display: block; // &.wht{ // .logo_wh{ // display: none; // } // .logo_color{ // display: block; // } // } } } .header_left{ @include dflx_ac; padding: 0 1rem 0.25rem 0; .header_title{ margin: 5px 0px 0px 15px; } } .header_title{ @include fs_18_medium; font-weight: 600; color: #fff; letter-spacing: 1px; } .header_right { @include dflx_ac; padding: 0 0 0 1rem; .user_zone{ margin: 0 0 0 1rem; } } .alarm_zone{ @include dflx_ac_jcent; width: 28px; height: 28px; position: relative; cursor: pointer; transition: 0.2s all; &:hover{ opacity: 0.8; } .dot{ position: absolute; right: 4px; top: 5px; } } .bell{ width: 20px; height: 20px; } .user_zone{ @include dflx_ac; .user_txt{ margin: 0px 0px 0px 8px; } } .user_thumb{ @include dflx_ac_jcent; position: relative; width: 28px; height: 28px; position: relative; background-color: #4d6586; //border: 1px solid #DCDDE0; border-radius: 100%; overflow: hidden; cursor: pointer; transition: 0.2s all; &:hover{ opacity: 0.8; } .photo_user{ @include ab_trans_center; width: 100%; height: auto; transform: translate(-50%, -45%); } } .user_txt{ @include dflx_ac; span{ @include fs_14_regular; color: #fff; &.user_name{ font-weight: 600; } } } .user_photo{ position: relative; width: 28px; height: 28px; overflow: hidden; cursor: pointer; transition: 0.2s all; &:hover{ opacity: 0.8; } } @keyframes in-aside { from { opacity: 0; left:-50px; } to { opacity: 1; left: 16px; } } .aside{ position: fixed; left: 1rem; top: 5.5rem; width: 13.75rem; height: calc(100% - 6.5rem); max-height: 54rem; background: #fff; border-radius: 10px; &.respon{ width: 64px; width: 4rem; .menu_line{ .menu_icon { margin: 0px; } .menu_tlt { display: none; } } } &.animate{ animation: in-aside 1s ease-in-out !important; } } .aside_wrap{ position: relative; width: 100%; height: 100%; .aside_arrow{ position: absolute; right: -1rem; top: 0.5rem; z-index: 10; } } .aside_arrow { width: 33px; width: 2rem; height: 33px; height: 2rem; background: #fff; border-radius: 100%; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); transition: 0.2s all; cursor: pointer; &:hover { opacity: 0.8; } .arr_icon_on{ display: none; } &.on{ .arr_icon{ display: none; } .arr_icon_on{ display: block; } } } .arrow_in { @include dflx_ac_jcent; width: 100%; height: 100%; } .aside_nav{ width: 100%; overflow: hidden; } .aside_nav li a{ display: block; } .menu_line{ @include dflx_ac; width: 100%; height: 56px; padding: 0px 16px; border-left: 4px solid #fff; transition: 0.2s all; .menu_icon{ margin: 0px 10px 0px 0px; } .menu_tlt{ padding:2px 0px 0px 0px; } &:hover{ background-color: #E4F6F3; border-left: 4px solid #E4F6F3; .mn_icon{ display: none; } .mn_icon_on{ display: block; } .menu_tlt{ color: #00A388; } } &.on{ background-color: #E4F6F3; border-left: 4px solid #00B295; .mn_icon{ display: none; } .mn_icon_on{ display: block; } .menu_tlt{ color: #00A388; } } } .mn_icon{ opacity: 0.2; } .mn_icon_on{ display: none; } .menu_tlt { @include fs_15_medium; } @keyframes in-contents { 0% { opacity: 0; } 50%{ opacity: 0; } 100% { opacity: 1; } } .contents_inner{ width: 100%; height: 100%; &.animate{ animation: in-contents 2s ease !important; } } .inner_top{ width: 100%; padding: 1rem 0px 2.5rem; } .inner_title{ flex: 1; padding: 0px; h1{ padding: 0px 0px 12px; letter-spacing: 0.5px; } .explain{ opacity: 0.6; letter-spacing: 0px; } } .explain{ @include fs_16_regular; } .inner_btzone{ @include dflx_jend; padding: 0 0 0 1.25rem; button{ margin: 0 0 0 0.5rem; } } .contents_body{ width: 100%; } .tab_body{ width: 100%; display: none; &.on{ display: block; } } .conts_top{ @include dflx_jbet; width: 100%; padding: 0 0 1.25rem; } .cotop_right{ padding: 0 0 0 1.25rem; .btn_srch{ &.bldark{ padding: 0 1rem; } } } .tabt_line{ @include dflx_ac; .btn_tab{ margin: 0 0.5rem 0 0; } &.data{ margin-top: 4px; margin-bottom: -0.5rem; } &.idpass{ width: 100%; margin: 2.375rem 0 0; .tab_nemo{ width: 50%; } } } .tab_nemo{ @include fs_15_regular; min-width: 8.25rem; height: 2rem; padding: 0 0.6rem; background: #fff; border: 1px solid #ccc; border-radius:0px; color: #222; transition: 0.2s all; &:first-child{ border-radius: 4px 0px 0px 4px; border-radius: 0.25rem 0 0 0.25rem; } &:last-child{ border-radius: 0px 4px 4px 0px; border-radius: 0 0.25rem 0.25rem 0; } &:hover { background-color: #e6e7eb; } &.on{ background: #E4F6F3; border: 1px solid #00B295; color: #00A388; font-weight: 500; } } .contents{ width: 100%; } .conts_body{ // @include bgfff_p20; width: 100%; } .table_cont{ width: 100%; position: relative; overflow: auto; padding: 0 0 0.25rem; min-height: 35.5rem; &.hauto{ min-height: auto; } .group_scope{ margin: 0 0 2rem; } } .netz_table{ width: 100%; thead{ th{ @include fs_14_medium; text-align: center; vertical-align: middle; padding: 0.07rem 0.5rem 0rem; height: 2.5rem; background: #E6E7EB; word-break: keep-all; line-height: 1.2; &.rline { border-right: 1px solid #8A8E99; } } } tbody{ td{ @include fs_14_regular; text-align: center; vertical-align: middle; padding: 0.44rem 0.5rem 0.25rem; height: 3rem; border-bottom: 1px solid #DCDDE0; word-break: keep-all; &.rline{ border-right: 1px solid #8A8E99; } &.td_etc{ background: #F0F1F5; position: relative; .trash{ margin: 0px 4px; } } .file_btwrap{ margin: 0px 0px 1px; } .selector,.wrput{ width: 100%; } } } } .manager_table{ tbody{ td{ &:first-child{ width: 4.75rem; } } } } .organ_table{ tbody{ td{ padding: 0.75rem 0.75rem; &:first-child{ width: 10%; padding-left: 1.25rem; } &:nth-child(3){ width: 50%; padding-left: 1.75rem; } } } } .trash{ width: 20px; height: 20px; transition: 0.2s all; cursor: pointer; &:hover{ opacity: 0.8; } } .caption_title{ @include fs_16_bold; letter-spacing: 0.5px; padding: 0px 0px 14px; display: block; text-align: left; } .group_scope{ display: inline-block; height: 32px; padding: 0.125rem 1.25rem 0 1rem; background: #F0F1F566; border: 1px solid #DCDDE0; border-radius: 0.5rem; vertical-align: baseline; } .gr_scope_line{ @include dflx_ac; height: 100%; column-gap: 2.25rem; } .scope_total{ @include dflx_ae; @include fs_16_bold; padding: 0 1.25rem 0 0; color: #00B295; line-height: 1; .decimal{ @include fs_12_regular; } } .scope_text{ @include dflx_ac; column-gap: 0.5rem; @include fs_16_medium; span{ color: rgba(0, 0, 0, 0.5); } .scope_count{ @include fs_16_bold; } } .scope_count{ &.sc1{ color: #0068E6; } &.sc2{ color: #46C2AD; } &.sc3{ color: #A7D154; } } .td_txt{ @include fs_14_regular; word-break: keep-all; //opacity: 0.8; &.scp1{ color: #0068E6; opacity: 1; } &.scp2{ color: #00A388; opacity: 1; } &.use{ font-weight: 500; color: #0068E6; opacity: 1; } &.un_use{ opacity: 0.3; } &.use_txt{ font-weight: 500; min-width: 3.25rem; //pacity: 0.8; } &.med{ @include fs_14_medium; line-height: 1.6; } &.tell{ min-width: 7.5rem; } } .date_txt{ @include fs_14_regular; opacity: 0.4; line-height: 1.2; letter-spacing: -0.5px; } .td_total{ .td_txt{ @include fs_12_regular; line-height: 1.4; } &.sum{ .td_txt{ @include fs_14_medium; color: #0068E6; } } } .td_facility{ .td_txt{ min-width:7.5rem; } } .td_organ{ .td_txt{ min-width: 3.25rem; } } .activity_table{ tbody{ td{ padding: 0.875rem 0.7rem 0.56rem; } } } .paging_space { width: 100%; padding: 1.45rem 0 0.125rem; padding: 1.125rem 0 0.125rem; text-align: center; } .paging_ul { display: inline-block; text-align: center; } .paging_ul li { display: inline; } .paging_ul li a { @include fs_14_regular; display: inline-block; width: 1.75rem; height: 1.75rem; background: #F7F8F9; border-radius: 4px; padding: 6px 6px 4px; margin: 0px 6px; color: rgba(0, 0, 0, 0.7); transition: 0.2s all; &.arrow{ background: transparent; padding: 0px; } } .paging_ul li a.on { background: #E6E7EB; color: rgba(0, 0, 0, 0.7); font-weight: 700; } .paging_ul li a:hover { opacity: 0.6; } .evid_table{ thead{ th{ &.th_kinds{ width: 28%; } &.th_upload{ width: 15%; } } } tbody{ td{ height: 2.5rem; } } } .detail_table{ tbody{ td{ height: 2.5rem; &:first-child{ width: 23%; } } tr{ &:last-child{ td{ border-bottom: none; } } } } } .detail_round{ width: 100%; border-radius:0.25rem; overflow: hidden; &.bord{ border:1px solid #DCDDE0; } } .file_btwrap { position: relative; cursor: pointer !important; .file_put{ @include ab_trans_center; width: 100%; height: 100%; opacity: 0; } } .file_result{ @include dflx_ac; padding: 0 0 0 0.25rem; &.half{ .p_r12{ @include txt_ellip; } .put_delete{ margin: 0; } } .p_r14 { // max-width: 532px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: calc(100% - 1.25rem); } .put_delete{ margin: 0; } } .plus_zone{ @include dflx_ac_jcent; width: 100%; padding: 0.5rem 0; } .enrolls_cont{ margin: 1.25rem 0 0; } .enrolls_top{ @include dflx_jbet; width: 100%; padding: 0px 0px 12px; border-bottom: 1px solid #8A8E99; } .enrolls_enroll{ padding: 12px 0px; } .dl_enroll{ @include dflx_ac; width: 100%; padding: 0.25rem 0; &.trans{ padding: 0.5rem 0; dt{ opacity: 0.7; } } &.top{ padding: 0 0 0.25rem; } dt{ @include fs_14_medium; width: 6.25rem; padding: 0 0.75rem 0 0; letter-spacing: 0px; .selector{ width: 100%; } .quest{ margin: 5px 0 0; cursor: pointer; } } dd{ display: flex; flex: 1; .selector{ width: 100%; } .wrput{ width: 100%; } .tlt{ @include fs_14_medium; } } } .grd_selt_sett{ display: grid; grid-template-columns: 6fr 4fr; gap: 0.25rem; } .grd_selt_sett73{ width: 100%; display: grid; grid-template-columns: 7fr 3fr; gap: 0.25rem; } /*Main*/ .header{ width:100%; height: 56px; height: 3.5rem; padding:8px 20px; padding: 0.5rem 1.25rem; background: transparent; border:none; border-radius:0px; &.white{ .header_title{ color:#003278; } .btn_login{ background: #FFF; border: 1px solid #DCDDE0; color: #000; } .btn_sign{ background: #00B295; color:#fff; } .logo_wh{ display: none; } .logo_color{ display: block; } } } // .btn_login.wht{ // background: #FFF; // border: 1px solid #DCDDE0; // color: #000; // } // .btn_sign.wht{ // background: #00B295; // color:#fff; // } .logo_color{ display: none; } .Main_body{ background-color: #F0F0F2; width: 100%; min-height: 100%; overflow: hidden; margin: 0; padding: 0; } .main_art01{ width: 100%; height: 100vh; position: relative; background-color: #002252; background-repeat: no-repeat; background-position: center center; background-position: 40% center; background-size: cover; } .main_ab_trans{ position: absolute; left: 0px; top: 0; width: 100%; height: 100%; z-index: 1; } .main_wrap{ position: relative; width: 100%; height: 100%; } .main_center01{ width: 94.5rem; margin: 0 auto; height: 100%; padding:2rem; background: transparent; } .mtitle_wrap{ @include dflx_ac_jend; width: 100%; height: 100%; &.left{ justify-content: flex-start; } &.between{ @include dflx_ac_jbet; } } .mtitle_dl{ text-align: left; padding: 0.5rem 1rem 0 0; dt{ font-size:2rem; font-weight:600; color: #fff; line-height: 1.3; letter-spacing: 1.8px; } dd{ .mtitle_exp{ @include fs_16_regular; color: #fff; letter-spacing: 0.8px; margin:1.3rem 0 0; } .btn_default{ margin:2.75rem 0 0; } } } @keyframes moveScroll { 50% { transform: translate(-50%, -20px); } } .go_ready { position: absolute; left: 50%; bottom: -10px; width:100px; height:auto; z-index: 10; transform: translateX(-50%); //animation: moveScroll 2s infinite; color: #fff; text-align: center; //cursor: pointer; img{ width: 100%; margin-top: -25px; } span{ @include fs_14_regular; } } .main_art02{ width: 100%; height: 100vh; position: relative; background-color: #F0F0F2; } .main_center02{ width: 106rem; margin: 0 auto; height: 100%; padding: 2rem; background: transparent; } .main_art03{ width: 100%; height: 100vh; position: relative; background-color: #fff; } .msent_dl{ color: #000; margin: 0 0 3rem; dt{ @include fs_20_bold; margin: 0 0 1.25rem; line-height: 1.4; } dd{ @include fs_16_regular; line-height: 1.8; } } @keyframes slideRight{ 0% { opacity:0; transform:translateX(200px); } 100% { opacity:1; transform:translateY(0); } } .art_img_right{ max-width: 75%; margin: 1rem -12.5rem 0 0; animation-duration: 1s !important; animation-delay: 0s !important; } .art_img_left{ max-width: 75%; margin: 1rem 0 0 -13rem; animation-duration: 1s !important; animation-delay: 0s !important; } .ani_img_right{ max-width: 75%; margin: 1rem -12.5rem 0 0; } .ani_img_left{ max-width: 75%; margin: 1rem 0 0 -13rem; } .main_art04{ width: 100%; height: 100vh; position: relative; background-color: #F0F0F2; } .date_put_wrap{ @include dflx_ac; // .date_put_dl{ // &:last-child{ // margin-left:4.25rem; // } // } } .date_put_dl{ @include dflx_ac; dt{ @include dflx_ac; @include fs_14_medium; margin: 0 1.5rem 0 0; line-height: 1; word-break: keep-all; } dd{ @include dflx_ac; .selector { width: 8.15rem; } } } .grd_date_sett{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 0.5rem; } .btzone_last{ @include dflx_ae_jcent; width: 100%; padding: 1.5rem 0 0; button{ margin: 0 0.25rem; } } .list_contain{ width: 100%; border-radius: 0.625rem; margin-bottom: 1rem; } .contain_top{ width: 100%; height: 3.5rem; padding: 0.8rem 1rem 0.5rem; background-color: #D2D3D6; border-radius: 0.625rem 0.625rem 0 0; .h3_m16{ letter-spacing: 0.5px; } } .contain_body{ width: 100%; padding: 1.25rem; background-color: #fff; border-radius: 0 0 0.625rem 0.625rem; } .data_top{ @include dflx_ac_jbet; width: 100%; } .datas_cont { width: 100%; position: relative; overflow: auto; .plus_zone{ border-top: 1px solid #DCDDE0; } } .datas_table{ width: 100%; thead{ th{ background-color: #fff; border-bottom: 1px solid #DCDDE0; text-align: left; vertical-align: top; height: 2rem; padding-top: 4px; .unit{ font-size: 0.75rem; opacity: 0.7; vertical-align: baseline; } } } tbody{ tr{ td { padding: 0.5rem 0.6rem; border: none; &.td_delete { padding: 0.5rem 0rem 0.5rem 0.6rem; } &:first-child{ padding-left: 0; width: 7%; } &:nth-child(3){ width: 15%; } } &:first-child{ td{ padding-top: 1rem; } } &:last-child{ td{ padding-bottom: 1rem; } } } } } .tr_datas{ &.del{ display: none; } } .add_contain{ width: 100%; height: 7.25rem; padding: 1.25rem; background: rgba(255, 255, 255, 0.4); border: 1px dashed #bebfc2; border-radius: 0.625rem; cursor: pointer; &:hover{ background: #E4F6F3 0% 0%; border: 1px dashed #00B295; } } .add_button{ @include dflx_ac; margin: 5px 0px 0px; cursor: pointer; .plus24{ margin: 0px 6px 0px 0px; opacity: 0.3; } span{ @include fs_16_medium; line-height: 1.6; } } .grd_month_set{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0.5rem; .selector{ width: 6.5rem; &.short{ width: 9.5rem; } } } .anlay_top{ width: 100%; padding: 0px 0px 1.5rem; border-bottom: 1px solid #D2D3D6; &.nobord{ border: none; padding: 0 0 2.5rem; } } .volume_body{ // @include bgfff_p20; padding: 0.75rem; } .analy_volume{ width: 100%; height: 7.44rem; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 0.625rem; } .volume_result{ @include dflx_ac_jcent; width: 100%; height: 100%; padding: 0.75rem 0 0; position: relative; .top{ position: absolute; left: 0; top: 0; width: calc(100% - 3rem); display: flex; align-items: center; } } .volume_count{ @include dflx_ae_jcent; .vol_count{ line-height: 1; } .p_r12{ color: #00000080; margin: 0 0.5rem; } } .vol_count{ font-size: 2.25rem; font-weight: 700; color: #00B295; line-height: 1; word-break: break-all; + .decimal{ @include fs_12_regular; color: #00B295; } &.bldark{ color: #002252; + .decimal{ color: #002252; } } &.sky{ color: #00B8E6; + .decimal{ color: #00B8E6; } } &.blue{ color: #0068E6; + .decimal{ color: #0068E6; } } &.red{ color: #E61717; + .decimal{ color: #E61717; } } } .anlay_conts{ width: 100%; padding: 1.25rem 0 0; } .analy_body{ // @include bgfff_p20; } .chart_top{ @include dflx_ae_jbet; width: 100%; margin: 0 0 1rem; line-height: 1; } .analy_charts{ display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(20.88rem, auto); grid-gap: 1.25rem; .analy_body{ &:first-child{ grid-column:1/7; } &:nth-child(2){ grid-column:7/14; } &:nth-child(3){ grid-column:1/9; } &:nth-child(4){ grid-column:9/14; } } } .chart_unit{ @include fs_12_regular; color: rgba(0, 0, 0, 0.5); } .chart_cont{ width: 100%; } .doub_chart_wrap{ @include dflx_jbet; width: 100%; height: 16.25rem; .chart_cont{ flex: 1; &.bord_dash{ border-right: 1px dashed #BEBFC2; } } .sales_chart_rcd{ margin: 0 0.5rem 0 0; } .scope_step{ margin-right: -1.2rem; } } .sales_chart_rcd{ width: 10.875rem; height: 100%; background: rgba(240, 241, 245, 0.4); border: 1px solid rgba(220, 221, 224, 1); border-radius: 0.5rem; padding: 0.75rem; .selector{ &.dispose{ margin-top: -4px; } } } .totall_box{ @include dflx; width:16.25rem; height: 2rem; padding: 0.3rem 1rem 0.2rem; background: #FFF; border: 1px solid #DCDDE0; border-radius: 4px; overflow: hidden; .wrput{ border: none; width: 100%; height: 100%; text-align: right; padding: 0 4px 0 0; } .unit{ font-size: 0.875rem; line-height: 1.6; } } .amcharts-amexport-menu{ display: none !important; } .sales_dispose{ @include dflx_ac_jcent; width: 100%; height:100%; padding: 0; position: relative; .date{ position: absolute; left: 0px; top: 0px; &.dash{ top: auto; bottom: 0px; } } .selector{ position: absolute; left: 0px; top: 0px; } } .dispose_result{ text-align: center; .vol_count{ font-size: 2rem; margin: 1rem 0 0.5rem; } } .date{ @include fs_12_regular; color: rgba(0, 0, 0, 0.5); } .chart_wrap { width: 100%; height: 16.625rem; overflow: hidden; &.reduce{ height: 28rem; padding: 1rem 0 0; position: relative; .chart_unit{ position: absolute; left: 0; top: 0; } } .chart_cont{ height: 100%; } } .ratio_wrap{ .chart_cont{ padding: 1rem; } } .scope_zone{ width: 100%; height: 100%; padding: 0.75rem; background: #F0F1F566 0% 0%; border: 1px solid #DCDDE0; border-radius: 0.5rem; position: relative; overflow: hidden; .chart_unit{ @include fs_11_regular; position: absolute; right: 12px; top: 8px; } .chart_cont{ width: 100%; height: 145%; margin-top: -0.25rem; } } .scope_step{ width: auto; padding: 1rem 0px 0px 0.3rem; .p_r14:first-child{ height: 55%; } .p_r14:nth-child(2){ height: 22%; } } .reduce_volume{ width: 100%; height: 11.25rem; padding: 0 0 0.75rem; display: grid; grid-template-columns:1.4fr 1fr 1fr 1fr; grid-gap: 0.625rem; border-bottom: 1px solid #D2D3D6; .scope_zone{ padding: 1rem; .chart_unit{ right: 0; top: 0; } } } .volume_last{ @include dflx_jcent; width: 100%; padding: 1.25rem 0 0.5rem; } .reduce_sett{ width: 80%; padding: 0.3rem 0 0 0.5rem; .dl_enroll{ dt{ @include fs_16_bold; width: 10.5rem; padding: 0 0.5rem 0 0; .mini{ @include fs_12_regular; color: rgba(0, 0, 0, 0.5); letter-spacing: -0.5px; } } } } footer{ width: 100%; height: 8.375rem; background-color: #5C5E66; padding: 2rem 2.25rem; } .footer_in{ width: 100%; padding: 2px 0 0; @include dflx_jbet; } .footer_left{ min-width:15.25rem; padding: 0 1rem 0 0; .copy{ @include fs_11_regular; font-weight: 300; color: #fff; margin: 3px 0 0; } } .footer_right{ flex: 1; } .copy_right{ width: 100%; padding: 2px 0 0; p{ @include fs_12_regular; font-weight: 300; color: #fff; line-height: 1.8; letter-spacing: 0.8px; } } .circle_arrow{ position: fixed; @include dflx_ac_jcent; right: 20px; right: 1.25rem; bottom: 20px; bottom: 1.25rem; width: 3rem; height: 3rem; background: rgba(0, 0, 0, 0.6); border-radius: 100%; z-index: 100; cursor: pointer; visibility: hidden; opacity: 0; transition: 0.3s all; &.on{ visibility: visible; opacity: 1; } &:hover{ background: rgba(0, 0, 0, 1); } } .analy_charts2{ display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(21.25rem, auto); grid-gap: 1.25rem; // .analy_body{ // &:first-child{ // grid-column:1/2; // } // &:nth-child(2){ // grid-column:2/3; // } // } } .charts_line{ @include dflx_jbet; width: 100%; .half{ width: 50%; padding:0 0 0 1.25rem; &:first-child{ border-right: 1px solid #DCDDE0; padding: 0 1.25rem 0 0; } } } .scope_chart{ width: 100%; height: 21.25rem; position: relative; .scope_sign{ position: absolute; left: 0px; top:0px; } .chart_unit{ position: absolute; right: 0px; top: 0px; font-size: 0.6875rem; } .chart_cont{ height: 100%; padding: 0.5rem; //z-index: 5; } } .chart_inner{ position: relative; width: 100%; background: #F0F1F566; border: 1px solid #DCDDE0; border-radius: 0.5rem; padding: 0.75rem; .top{ text-align: center; margin: 0.5rem 0 1rem; line-height: 1.2; } .chart_unit{ @include fs_11_regular; position: absolute; right: 1rem; top: 1rem; } } .scope_sign{ @include dflx_ac_jcent; min-width: 95px; padding: 0.25rem 1rem 0.23rem; background: #00B295; border-radius: 4px; color: #fff; text-align: center; font-size: 1rem; line-height: 1.2; } .Sign_body{ @include dflx_ac_jcent; width: 100%; min-height: 100%; background-color: #F0F0F2; padding: 1rem; } .Sign_center{ width: 50.5rem; margin: 4.3rem auto; background-color: transparent; } .sign_top{ width: 100%; height: 5.125rem; padding: 0.75rem; background: #002252; border-radius: 10px; margin: 0 0 1rem; } .sign_contents{ width: 100%; background-color: #fff; border-radius: 10px; padding: 1.5rem; } .sign_sequence{ @include dflx_ac_jbet; margin: 0 0 5.625rem; } .sequence_cont{ @include dflx_ac_jend; } .seq_dl{ @include dflx_ac; margin: 0 0 0 0.625rem; opacity: 0.3; dt{ @include dflx_ac_jcent; @include fs_12_regular; margin: 0 6px 0 0; width: 26px; height: 26px; border: 1px solid #000; background-color: #fff; border-radius: 100%; line-height: 1; } dd{ @include dflx_ac; line-height: 1; .call{ @include fs_14_medium; margin: 0 0.5rem 0 0; } .line{ width: 30px; height: 1px; background-color: #000; } } &.on{ opacity: 1; dt{ background: #00B295; border: 1px solid #00B295; color: #fff; } dd{ .call{ color: #00B295; } .line{ background-color: #00B295; } } } } .terms_contain{ width: 100%; } .terms_full{ padding: 0 0 5px; border-bottom: 1px solid #8A8E99; } .check_dl{ @include dflx; width: 100%; padding: 0 0 0.5rem; cursor: pointer; dt{ width: 1.75rem; } dd{ flex: 1; } } .check_box{ width: 1.25rem; height:1.25rem; cursor: pointer; .icon_on{ display: none; } &.on{ .icon{ display: none; } .icon_on{ display: block; } } } .terms_sent{ @include fs_14_medium; line-height: 1.4; &.full{ @include fs_16_bold; color: #00A388; } } .terms_cont{ width: 100%; padding: 0.9375rem 0 0.5rem; ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.4); border-radius: 50px; } ::-webkit-scrollbar-corner { background-color: transparent; } ::-webkit-scrollbar-track { background-color: none; } .temrs_text_wrap { border: 1px solid #DCDDE0; padding:0.875rem 0.25rem 0.25rem 1rem; } } .terms_area{ width: 100%; height: 8rem; padding-right: 1.5rem; background-color: #fff; overflow: auto; font-size: 0.875rem; color: rgba(0, 0, 0, 0.7); line-height: 1.5rem; resize: none } .btzone_between{ @include dflx_jbet; width: 100%; padding: 1rem 0 0; } .analy_charts3{ display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(21.25rem, auto); grid-gap: 1.25rem; .analy_body{ &:first-child{ grid-column: 1/3; } &:nth-child(2){ grid-column: 3/4; } &:nth-child(3){ grid-column: 4/5; } &:nth-child(4){ grid-column: 1/3; } &:nth-child(5){ grid-column: 3/5; } &:nth-child(6){ grid-column: 1/5; } } } .status_vert_wrap{ height: 100%; display: flex; flex-direction: column; justify-content: space-between; .chart_cont{ height: calc(100% - 1rem); padding: 1.6rem 0 0; } } .status_dl{ @include dflx_ac_jbet; width: 100%; height: 3.75rem; padding: 1.187rem 1.5rem 0.9375rem 1.2rem; background: #F0F1F566; border: 1px solid #DCDDE0; border-radius: 8px; dt{ @include fs_14_regular; margin: 0.25rem 0.25rem 0 0; word-break: keep-all; } } .scope_result{ color: #00B295; word-break: keep-all; .unit{ margin:0 0 1px 1px; } } .plus20{ @include dflx_ac_jcent; width: 1.25rem; height: 1.25rem; } .see_more{ @include dflx_ac; transition: 0.2s all; &:hover{ opacity: 0.8; } .plus20{ opacity: 0.3; margin: 0 0.25rem 0 0; } } .profile_photo{ width: 5.25rem; height: 5.25rem; margin: 0px 8px 0px 0px; position: relative; cursor: pointer; .img_camera{ position: absolute; right: 0px; bottom: 0px; z-index: 10; } } .circle_photo{ position: relative; width:100%; height:100%; background-color: #F0F1F5; border: 1px solid #DCDDE0; border-radius: 100%; overflow: hidden; .photo_user{ @include ab_trans_center; width: 100%; height: auto; transform: translate(-50%, -45%); z-index: 1; } } .photo_upload{ position: absolute; z-index: 9; right: -6px; bottom: 0; } .member_photo{ width: 3.375rem; height: 3.375rem; position: relative; overflow: hidden; } .form_inner_phone{ display: grid; grid-template-columns: 2fr 1fr; gap: 0.5rem; } .alarm_top{ @include dflx_jbet; width: 100%; border-bottom: 1px solid #DCDDE0; padding: 1.5rem 1.5rem 1.25rem; column-gap: 1rem; } .alarm_cont{ width: 100%; padding: 1.5rem 1.5rem 1.25rem; &.grey{ background-color: #F0F1F5; } .timer{ margin: 0.25rem 0 0; } } .point_dl{ @include dflx_as; width: 100%; dt{ width: 0.875rem; height: 0.875rem; .point{ margin: 0.375rem 0 0; } } dd{ @include fs_14_regular; flex: 1; .timer{ padding: 0.25rem 0 0; } } } .alarm_inner{ padding: 0 0 0 0.875rem; } .alarm_detail{ padding: 1rem 0 0; h4{ line-height: 1.6; } .p_r14{ letter-spacing: 0.5px; } } .point{ display: inline-block; width: 0.375rem; height: 0.375rem; background: #C8C9CC; border-radius: 100%; &.on{ background: #00B295; } } .timer{ @include dflx_ac; @include fs_11_regular; span{ opacity: 0.4; } } .right_panel{ position: fixed; top: 0px; right: -28rem; width: 25.625rem; height: 100%; padding: 1.25rem 0 1.25rem 1.25rem; background: #fff; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2); border-radius: 1.25rem 0 0 1.25rem; z-index: 700; transition: 0.3s all; &.on{ right: 0px; } .panel_inner{ padding: 0 1rem 0 0; } } .panel_inner::-webkit-scrollbar{ -webkit-appearance: none; width:8px; } .panel_inner::-webkit-scrollbar-thumb{ background-color:rgba(0, 0, 0, 0.4); border-radius: 50px; cursor: pointer; } .panel_inner::-webkit-scrollbar-track{ width:8px; background-color: none; } .panel_inner::-webkit-scrollbar-corner { background-color: transparent; } .panel_inner{ position: relative; width: 100%; height: 100%; padding: 0; overflow: hidden; overflow-y: auto; .panel_close{ position: absolute; left: 0px; top: 0px; } } .panel_close{ display: inline-block; width: 28px; height: 28px; cursor: pointer; &:hover{ opacity: 0.7; } } .panel_top{ width: 100%; padding: 4.75rem 0 0; h1{ color: #00A387; margin: 0 0 1.75rem; } } .panel_text{ p{ @include fs_16_regular; font-weight: 300; line-height: 1.6; margin: 0 0 9px; strong{ font-weight: 500; margin: 0 4px; } } } .tier_cont{ padding: 26px 0 0; } .tier_dl{ margin: 24px 0 0; dt{ @include fs_14_medium; font-weight: 700; margin: 0 0 0.25rem } dd{ @include fs_14_regular; line-height: 1.5; strong{ color: #00A388; } } } // .form_contents{ // .put_zone{ // .mess{ // margin: 2px 0 0; // } // } // } .tab_line{ @include dflx_ac; width: 100%; padding: 0 0 1.75rem; column-gap: 0.5rem; } .tab_radio{ @include dflx_ac; cursor: pointer; .img_on{ display: none; } &.on{ .img{ display: none; } .img_on{ display: block; } .word{ color: #00A387; } } .word{ @include fs_14_medium; color: #000000; margin: 0 0 0 0.5rem; } } /* 01-10 lee css */ select option[value=""][disabled] { display: none; } .text_point { color: #00A387; } .button_default { margin: 0 0; padding: 0 0; border: none; background: transparent; transition: 0.2s all; &:hover{ opacity: 0.8; } &.lightgrey { border: 1px solid #DCDDE0; background-color: #F0F1F5; } &.darkgrey { background-color: #5C5E66; // color: $colfff; &:hover{ opacity: 0.9; } } &.white { border: 1px solid #DCDDE0; // background-color: $colfff; } } .td_name { @include fs_14_regular; //cursor: pointer; word-break: nowrap; color: #0069CC; } .td_space { @include fs_14_regular; width: 15rem; margin: 0 auto; text-align: left; word-break: keep-all; //opacity: 0.8; } .users_table { th {width: 7.5rem;} th:nth-child(6) {width: 16.5rem;} th:nth-child(7) {width: 22.5rem;} th:nth-child(1), td:nth-child(1) { width: 52px; padding-left: 1.25rem; } } .custom_checkbox { input[type=checkbox] { position: absolute; left: -9999px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } label { // @include rpno_cent_cent; display: block; min-width: 20px; height: 20px; padding-left: 24px; cursor: pointer; background-image: url(../../public/images/checkbox.svg); background-position: left center; } label.on { background-image: url(../../public/images/checkbox_on.svg); } } .users_state { @include fs_12_medium; width: 3.5rem; height: 1.375rem; margin: 0 auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; line-height: 1.375rem; text-align: center; padding: 0 0.3rem; overflow: hidden; &.users_pending { background: #E9EBEE; color: rgba(0, 0, 0, 0.6) } &.users_rejection { background: #FFE5ED; color: #DB0000; } &.users_approval { background: #E3F3FF; color: #0068E6; } &.manager{ background: #0068E6; color: #fff; font-weight: 400; min-width:3.75rem; } &.sky{ background: #00B8E6; } &.blue{ background: #0068E6; } &.red{ background: #E61717; } &.auto{ @include dflx_ac_jcent; color: #fff; font-weight: 400; width: auto; min-width: 3.375rem; margin: 0; } } .help_information_btn { display: flex; position: fixed; z-index: 50; top: 88px; right: 0; width: 32px; height: 44px; border-radius: 5px 0 0 5px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16); background: #1FB0A6; img { position: absolute; z-index: -1; top: 7px; left: 7px; width: 18px; height: 18px; } button { @include dflx_ae_jcent; @include fs_11_medium; width: 100%; padding: 0 0 3px; background: none; letter-spacing: 0.025rem; // color: $colfff; } } .toast_popup_box { position: fixed; z-index: 102; top: 16px; right: 16px; } .toast_popup { display: grid; grid-auto-rows: minmax(60px, auto); row-gap: 12px; } .toast_sett{ display: flex; flex-direction: column; align-items: flex-end; } .toast_box{ display: inline-block; min-width:354px; min-width: 22rem; margin: 0 0 0.75rem; } .toast_in{ @include dflx_ac; padding: 16px 12px 16px 18px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: #E6E7EB; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); .button_default { margin-left: auto; img{ max-width: fit-content; } } .toast_text { @include fs_14_regular; margin: 0 24px 0 12px; line-height: 1.4; } } // 이용자 반려 팝업 .pop_users, .pop_users_confirm {width: 24.25rem; padding: 1.5rem;} .pop_users_confirm { .pop_cont { padding-bottom: 1.5rem; } } .pop_paragraph { color: rgba(0, 0, 0, 0.8) } .user_rejection_list { display: inline-block; margin-top: 12px; padding: 4px 48px 4px 8px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #E6E7EB; li { @include fs_14_regular; position: relative; padding-left: 10px; line-height: 1.4rem; color: rgba(0, 0, 0, 0.6); &:before { position: absolute; left: 0; content: "-"; } } } // 이용자 확인 팝업 .border_list { padding: 20px 0; border-top: 1px solid #8A8E99; border-bottom: 1px solid #DCDDE0; } .user_approval_list { li { @include dflx_ac; margin-top: 12px; &:first-child {margin-bottom: 0} .text_01 { @include fs_14_regular; width: 113px; color: rgba(0, 0, 0, 0.7); } .text_02 { @include fs_14_medium; } } .additional_file { margin-top: 20px; padding-top: 20px; border-top: 1px solid #DCDDE0; .text_02 { font-weight: 400; color: #0068E6; text-decoration: underline; } } } // 회원관리 모달 .member_popup_box { position: fixed; z-index: 101; right: 16px; top: 84px; animation: modal-member .3s; .pop_body { //width: 336px; width: 21rem; overflow: hidden; } .member_information { @include dflx_ac; padding: 1.5rem 1.5rem 1.25rem; column-gap: 1rem; } .member_image { width: 54px; overflow: hidden; } .member_text { line-height: 1; } .member_name { @include fs_16_bold; margin-bottom: 7px; } .member_email { @include fs_14_regular; color: rgba(0, 0, 0, 0.7); } .member_modify, .member_logout { @include fs_16_regular; width: 100%; height: 2.75rem; padding-left: 1.5rem; text-align: left; } .member_modify { border-top: 1px solid #DCDDE0; border-bottom: 1px solid #DCDDE0; background: #F0F1F5; } .member_logout { background-color: #fff; } } // 회원 정보 변경 팝업 .modify_confirm_list { margin-top: 1.25rem; li { @include dflx_ac; height: 44px; margin-bottom: 8px; &:last-child {margin-bottom: 0} } .modify_password_title { @include fs_16_regular; width: 100px; } .modify_password_data { align-self: stretch; flex: 1; line-height: 44px; font-weight: 500; } .wrput { width: 100%; height: 100%; } } // 회원정보 변경 입력 폼 $btn_w84: 84px; .form_error_msg { @include fs_13_regular; position: absolute; left: 20px; bottom: 1px; color: #DB0000 } .member_modify_form { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; overflow: hidden; .form_row { display: flex; align-items: stretch; //height: 72px; height: 4.5rem; border-bottom: 1px solid #DCDDE0; // background: $colfff; //&:last-child {border-bottom: 0;} .button_default { @include fs_14_regular; height: 2rem; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; text-align: center; } } .form_title { @include fs_16_medium; width: 14.75rem; padding: 1.687rem 1rem 0.5rem 1.25rem; padding: 1.687rem 0.5rem 0.5rem 1.25rem; background: #E6E7EB; color:rgba(0, 0, 0, 0.7); } .form_contents { flex: 1; max-width: calc((100% - 29.5rem) / 2); position: relative; padding: 1.25rem 2.5rem 0.5rem 1.25rem; .wrput { width: 100%; //max-width: 532px; //max-width: 32.5rem; } &.row_last_contents { padding-right: 1.25rem; } } .form_error_msg { @include fs_13_regular; position: absolute; left: 20px; bottom: 1px; color: #DB0000 } .remark_msg { @include fs_14_regular; // position: absolute; // bottom: 19px; color: rgba(0, 0, 0, 0.5); margin:1px 0 0; } .form_business_registration{ min-height: 100px; .form_contents { max-width: 100%; } } .form_company_address{ height: 112px; } .form_company_phone{ height: auto; min-height: 78px; } .form_profile_image { height: auto; .button_default { width: $btn_w84; margin-bottom: 10px } .form_contents { @include dflx_ae; max-width: 100%; column-gap: 0.5rem; padding: 1.25rem 2.5rem 1.25rem 1.25rem; } .profile_thumbnail { margin-right: 9px; } } .form_admin_email { height: 88px; .button_default {width: 7rem;} .form_contents { @include dflx_as; flex-wrap: wrap; column-gap: 8px; .dflx { width: 100%;} } .wrput {flex: 1;} } .form_sms_verification { @include dflx; column-gap: 0.5rem; .button_default {width: 4.25rem;} .wrput, .put_zone {flex: 1;} } } .form_find_address { display: flex; gap: 0.5rem; flex-wrap: wrap; .button_default {width: $btn_w84;} .input01 { flex: 1; width: auto; } } .form_email_line{ width: 100%; display: flex; gap: 0.5rem; .put_zone{ flex: 1; } } .form_head_phone { display: grid; grid-template-columns: 7rem 1fr; gap: 0.5rem; .selector { width: 7rem; color:rgba(0, 0, 0, 0.5); } .remark_msg { @include fs_13_regular; left: 8.5rem; bottom: 7px; color:rgba(0, 0, 0, 0.7); } } .form_file_upload { @include dflx_ac; .button_default {width: $btn_w84;} .form_file_name { @include fs_14_regular; width: auto; max-width: 532px; margin: 0 8px 0 16px; padding: 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .remark_msg{ margin: 0.5rem 0 0; font-size: 0.75rem; } // + .message{ // margin: 0.5rem 0 0; // } .form_file_remove {cursor: pointer;} } .form_admin_email { .button_default {width: 112px;} .remark_msg { @include dflx_as; @include fs_12_regular; bottom: 10px; line-height: 1.5rem; color: rgba(0, 0, 0, 0.7); } } // 회원가입 단계 .signup_title{ @include fs_16_bold; } .signup_step_form { margin: 1rem 0 0.5rem; padding: 2rem 0 1.75rem; border-top: 1px solid #8A8E99; border-bottom: 1px solid #DCDDE0; .form_row { //@include dflx_ac; @include dflx_as; //height: 2rem; //margin-bottom: 1.75rem; min-height:3.75rem; padding: 0 0 0.5625rem; // background: $colfff; &:last-child { min-height: 2.2rem; padding: 0; } .button_default { @include fs_14_regular; height: 2rem; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; text-align: center; } } .form_title { @include fs_14_medium; width: 10.5rem; padding: 0.5rem 0.5rem 0 0; } .form_contents { //@include dflx_ac; @include dflx; position: relative; flex: 1; column-gap: 0.5rem; .wrput { flex: 1; &.input01{ flex: auto; } } .form_error_msg { left: 0; bottom: -21px; } .put_zone{ flex: 1; } } .form_admin_id{ .button_default {width: 5.25rem;} } .duplication_checked { position: absolute; top: 0.3rem; right: 6.5rem; } .form_admin_email { //min-height: 2.6rem !important; .remark_msg { position: absolute; bottom: -26px; } } .form_sms_verification { .button_default { width: 4.25rem; } } .form_signup_phone { .selector { width: 8rem; color: rgba(0, 0, 0, 0.5); } .input02 { width: 9rem; } .remark_msg { @include fs_13_regular; position: absolute; left: 0; bottom: -21px; color:rgba(0, 0, 0, 0.7); } } .form_company_name { .button_default {width: 4.25rem;} } .form_business_registration { //min-height: 6.5rem; .form_title { align-self: flex-start; padding-top: 6px; } .form_contents { flex-wrap: wrap; .remark_msg { @include fs_12_regular; width: 100%; line-height: 1.25rem; color: rgba(0, 0, 0, 0.5); } } .file_result .p_r14 { max-width: 450px; } } .form_company_address { min-height: 6.25rem; .form_title { align-self: flex-start; padding-top: 6px; } } .form_find_address { flex: 1; .input02 {width: 100%; flex: auto;} } } // 가입완료 팝업 .signup_success { .text_point { font-weight: 700; } .remark_msg { @include fs_14_medium; margin-top: 1rem; color: rgba(0, 0, 0, 0.5); } } .pop_address_search{ width: 24.25rem; padding: 1.5rem 0; .address_search_list { padding: 1.25rem 0 1.5rem; .put_zone { flex: 1; .wrput {width: 100%;} } } .pop_top, .input_sett, .pop_bottom { width: calc(100% - 3rem); margin: 0 auto; } .pop_top { padding-bottom: 1rem; border-bottom: 1px solid #8A8E99; } .search_scrollbox{ position: relative; padding: 1.5rem 0; &:after { position: absolute; left: 1.5rem; bottom: 0; width: calc(100% - 3rem); height: 1px; background: #DCDDE0; content: ""; } } .address_result { height: 13.75rem; max-height: 15rem; overflow-y: auto; &::-webkit-scrollbar { width: 4px; } &::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.4); border-radius: 50px; } &::-webkit-scrollbar-corner { background-color: transparent; } &::-webkit-scrollbar-track { background-color: none; } li { @include dflx_jstart; min-height: 4.25rem; padding: 0.675rem 1.5rem; cursor: pointer; &:hover, &.on { background: #F0F1F5; } } .list_checked {display: none;} .on .list_checked { display: block; align-self: center; margin-left: auto; } } .result_text * { flex: 1; padding-right: 1rem; color: rgba(0, 0, 0, 0.8); } .result_text01 { @include fs_16_medium; margin-bottom: 8px } .result_text02 { @include fs_14_regular; } } .row_sett{ width: 50%; height: 100%; display: flex; } /*반응형*/ @media screen and (max-width: 1664px) { .main_center02,.main_center04,.main_center04{ width: 96%; } .member_modify_form{ .form_contents{ max-width: calc((100% - 24rem) / 2 + 12rem); padding: 1.25rem 1.25rem 0.5rem 1.25rem; } .form_title{ width: 12rem; } } .form_head_phone{ grid-template-columns: 5.5rem 1fr; .selector{ width: 5.5rem; padding: 0 1.2rem 0 0.6rem; } } .form_inner_phone{ .wrput{ padding: 0px 0.75rem; } } .status_dl{ padding: 1.187rem 0.6rem 0.9375rem 0.5rem; } } @media screen and (max-width: 1520px) { .main_center01{ width: 90%; } .art02_img{ max-width: 70%; } .ani_img_right{ max-width: 70%; } .ani_img_left{ max-width: 70%; } } @media screen and (max-width: 1360px) { html, body{ font-size: 0.875rem; } .Dash_body{ padding-left: 7rem; } .aside { width:64px; width: 4rem; } .aside_arrow{ display: none; } .menu_line{ .menu_icon{ margin: 0px; } .menu_tlt{ display: none; } } .aside_arrow .arr_icon{ display: none; } .aside_arrow .arr_icon_on{ display: block; } .put_zone{ .put_check{ top:4px; } } .w260{ width: 16.25rem !important; } .member_modify_form{ .form_business_registration{ min-height: 6.25rem; } .form_company_address{ height: 7rem; } .form_profile_image{ height: auto; } } .date_put_dl{ dt{ margin: 0 1rem 0 0; } dd{ .selector{ width: 7rem; } } } .totall_box{ width: 13rem; } .doub_chart_wrap{ .sales_chart_rcd{ width: 9rem; margin: 0; padding: 0.625rem; } } .dispose_result{ .vol_count{ font-size: 1.5rem; } } } @media screen and (max-width: 1200px) { .date_put_wrap{ .date_put_dl{ &:last-child{ margin-left: 0rem; } } } .date_put_dl{ dt{ margin: 0 0.5rem 0 0; } } .ani_img_right{ max-width: 65%; } .ani_img_left{ max-width: 65%; } } @media screen and (max-width: 992px) { .main_center02,.main_center04,.main_center04{ width: 100%; } .mtitle_wrap{ &.between{ flex-direction: column; justify-content: center; } } .ani_img_right{ max-width: 100%; } .ani_img_left{ max-width: 100%; } .main_art02,.main_art04{ .msent_dl{ margin: 0 0 4rem -15rem; } } .main_art03{ .msent_dl{ margin: 4rem -15rem 0 0; } } .Sign_center{ width: 90%; margin: 0 auto; } }