/* common */ h1 {font-family: 'GmarketSans';} /* button */ .btn {display: inline-flex; align-items: center; justify-content: center; border-radius: .25rem; padding: 0 1rem; border: 1px solid transparent; font-size: .875rem; color: #fff; height: 2.25rem; flex-shrink: 0; white-space: nowrap;} .btn svg, .btn i {margin-right: .25rem; fill: #fff;} .btn-icon svg {margin: 0; fill: #2D3038;} .btn-default {background: linear-gradient(132deg, #4849CE 0%, #3C68C8 100%);} .btn-default-line {color: #0054B6; background-image: linear-gradient(90deg, #484CCE 0%, #3D67C9 100%); /* Fill the inside with white */ background-origin: border-box; box-shadow: inset 0 2rem white; /* A transparent border, so the very edge of the button shows through */ border: 2px solid transparent; } .btn-default-line svg {fill: #4046CA;} .btn-white {background: #fff; color: #1C1B1F; border-color: #535353;} .btn-white.active, .btn-white:hover {background: #eee;} .btn-white.complete {background: #EBECF0; color: #5B5E66;} .btn-purple {background: #6868AC;} .btn-purple.active, .btn-purple:hover {background: #002A18;} .btn-light-purple {background: #9195FF;} .btn-gray {background: #8E9099;} .btn-gray.active, .btn-gray:hover {background: #000;} .btn-green {background: #00A19A; color: #fff;} .btn-green svg.icon {fill: #fff;} .btn-blue {background: #0265DC;} .btn-blue.active, .btn-blue:hover {background: #0747A6;} .btn-yellow {background: #FEC846; color: #1C1B1F;} .btn-yellow svg {fill: #5B5E66;} /* .btn-yellow.active, .btn-yellow:hover {background: #E65100;} */ .btn-red {background: #D7373F;} .btn-red.active, .btn-red:hover {background: #BB121A;} .btn-darkblue {background: #344563;} .btn-border {border: 2px solid #505F79; background: rgba(9, 30, 66, 0.04); color: #172B4D;} .btn-border:hover, .btn-border.active {background: #172B4D; border-color: #172B4D; color: #fff;} .btn-ellipse {border-radius: 1rem;} .btn-link {color: #0052CC; display: inline-flex; align-items: center; padding: 0 .25rem; text-underline-offset: 0.175rem; cursor: pointer;} .btn-link:hover {text-decoration: underline;} .btn[disabled] {border-color: #383A3E; background: #939094; color: #484649; pointer-events: none;} .btn[disabled] svg {fill: #5E6C84;} .btn-white svg, .btn-border svg {fill: #172B4D;} .btn-link svg {fill: #426bb7; width: 1rem; height: 1rem;} .btn-small{font-size: .8125rem; height: 1.5rem; padding: .25rem .5rem;} .btn-small svg {width: 1rem; height: 1rem;} .btn.btn-icon {padding: 0; height: 1.5rem;} .btn-large {height: 4rem; padding: 0 1.5rem; border: 2px solid #535353;} .btn-center {text-align: center;} .btn-right {justify-content: flex-end !important;} .btn-group {display: flex;} .btn-group .right_side {margin-left: auto;} .btn-group select {width: auto;} .column {flex-direction: column;} .btn-group.column {justify-content: center;} .btn-group.column [class*="btn"] + [class*="btn"] {margin-left: 0; margin-top: 1.5rem;} .btn-absolute.btn-group {position: absolute; top: 0; right: .75rem; width: auto; display: flex; align-items: center;} .btn-absolute.btn-group .btn, .btn-absolute.btn-group input {margin-left: .5rem;} [class^="btn"] + [class^="btn"] {margin-left: .25rem;} .btn-close {position: absolute; right: 1rem; top: 1rem;} .btn-close svg {margin: 0;} .btn-full .btn {width: 100%; justify-content: center;} .disabled svg.icon, .disabled:hover svg.icon {fill: #5E6C84;} .btn-approval, .btn-sign {background: #EBECF0; color: #8E9099;} .btn-approval svg.icon, .btn-sign svg.icon {fill: #0054B6;} .btn-approval.complete, .btn-sign.complete {border: 1px solid #8E9099;} .btn-approval.complete svg.icon, .btn-sign.complete svg.icon {fill: #2D3038;} .btn-approval.return {background: rgba(234, 56, 41, 0.20); color: #D31510;} .btn-approval.return svg.icon {fill: #D31510;} .btn-top {position: fixed; bottom: 7rem; right: 1.625rem; background-color: #2D3038; width: 2rem; height: 2rem; border-radius: 50%; padding: 0; filter: drop-shadow(0px 0px 1px rgba(9, 30, 66, 0.31)) drop-shadow(0px 3px 5px rgba(9, 30, 66, 0.20)); visibility: hidden;} .btn-top svg.icon {position: absolute; margin-right: 0;} .btn-temporary {position: fixed; top: -82px; right: 152px; z-index: 100; width: 158px; height: 158px; font-size: 1rem; line-height: 1.25rem; letter-spacing: -1px; color: #fff; border: 4px solid rgba(237, 244, 255, 0.80); border-radius: 50%; background: rgba(255, 204, 0, 0.80); filter: drop-shadow(0px 0px 1px rgba(9, 30, 66, 0.31)) drop-shadow(0px 18px 28px rgba(9, 30, 66, 0.15)); flex-direction: column; padding-top: 4rem;} /* chevron */ .chevron::after {content: ''; display: inline-block; border: solid #484649; border-width: 0 3px 3px 0; padding: 4.25px; border-radius: .5px;} .chevron.right:after {transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin-left: 0; margin-right: .25rem;} .chevron.left:after {transform: rotate(135deg); -webkit-transform: rotate(135deg); margin-left: .25rem;} .chevron.top:after {transform: rotate(-135deg); -webkit-transform: rotate(-135deg); margin-bottom: -.25rem;} .chevron.bottom:after {transform: rotate(45deg); -webkit-transform: rotate(45deg); margin-bottom: .375rem;} .input_group, .input_btn {display: flex; position: relative; align-items: center;} .input_group > *:not(:first-child) {margin-left: .5rem;} .input_group > .datepicker_box, .input_group > .input_btn {flex: 1;} .input_group:not(.panel .input_group) > button {height: 1.875rem;} .input_group.input_btn .btn-white {padding: 0 .75rem; height: 30px; border-color: #C4C6D0; border-radius: 0 .25rem .25rem 0; right: 0;} .input_btn > button, .input_btn > label {position: absolute; right: .25rem;} .input_wrap {display: flex; flex-wrap: wrap; margin: 0 -.5rem;} .input_wrap > * {display: flex; align-items: center; margin: .25rem .5rem;} .input_wrap button:not(.btn) svg.icon {margin-left: .25rem;} .input_wrap .btn-group {margin-left: 1.9375rem;} .upload_file_wrap {display: flex; align-items: center; height: 100%;} .upload_file_wrap .icon_box {margin-left: 1rem;} .upload_file_wrap .icon_box .btn:hover svg {fill:#615EE1;} .upload_file {display: flex;} .upload_file .btn {border: 1px solid #C4C6D0; color: #000; padding: 0 .5rem; border-radius: 0; margin: 0 !important;} .upload_file .btn:first-child {min-width: 17.75rem; justify-content: flex-start;} .upload_file .btn svg {fill: #2D3038;} .upload_file .btn:not(:first-child) {border-left: 0;} .upload_file .btn:first-child {border-radius: .25rem 0 0 .25rem;} .upload_file .btn:last-child {border-radius: 0 .25rem .25rem 0;} /* tag */ .tag span {border: 1px solid #DADCE0; border-radius: .1875rem; padding: 0 .5rem; line-height: 1.25rem; cursor: pointer;} .tag span:focus {border: 2px solid #54A3F6;} .tag span svg.icon {width: .875rem; height: .875rem;} .tag span.btn-gray {background: #BFBFC6; border-color:#BFBFC6; color: #fff;} .tag span.btn-gray.on, .tag span.btn-gray:hover {background: #6868AC; border: 1px solid #6868AC;} .tag span.btn-gray svg.icon {fill: #fff;} /* skipnav */ #skipnav a {display: block; position: absolute; left: 0; top: -10000px;} #skipnav a:hover, #skipnav a:focus, #skipnav a:active {top: 0; padding: 15px 0; background: #004b9d; color: #fff; text-align: center; z-index: 1001; width: 100%;} /* body {min-width: 1280px;} */ .wrap {display: flex; flex-direction: column; min-height: 100vh;} header {position: relative; display: flex; align-items: center; box-sizing: border-box; background-color: #fff; box-shadow: 0px 3px 5px rgba(9, 30, 66, 0.2), 0px 0px 1px rgba(9, 30, 66, 0.31); z-index: 99; padding: 0 1.5rem;} aside {position: absolute; top: var(--header-height); left: -240px; transition: .5s; z-index: 88;} body.menu-opened aside {left: 0;} aside .panel, main {height: calc(100vh - var(--header-height)); box-sizing: border-box;} aside .panel {width: var(--aside-width); background-color:#fff; box-shadow: 0px 3px 5px rgba(9, 30, 66, 0.2), 0px 0px 1px rgba(9, 30, 66, 0.31); overflow-y: auto; padding: 1rem; position: relative;} aside .panel::-webkit-scrollbar {width: 5px;} aside .panel::-webkit-scrollbar-track {background: #e9ecef;} aside .panel::-webkit-scrollbar-thumb {background: #c4c6c8; border-radius: .25rem;} aside .panel::-webkit-scrollbar-thumb:hover {background: #132150;} .gis aside .panel {padding-top: 2rem;} aside .panel .btn_home {display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; margin: -1rem -1rem 0; padding-top: 2px; padding-left: .5rem;} .main {min-height: 100%; flex: 1; display: flex;} body.menu-opened .main {margin-left: var(--aside-width);} body.menu-opened .main nav {display: none;} main {flex: 1; padding: 1.5rem; position: relative;} main.map {padding: 0;} #map {height: 100%;} body.main aside .panel {display: none;} body.main .btn_toggle_menu {display: none;} body.main main {padding-left: 0;} body.gis aside {left: 0;} .legend, body.gis aside .panel {background: rgba(255, 255, 255, 0.8); width: auto; z-index: 1;} body.gis .main nav {display: none;} .logo {display: flex; align-items: center; font-size: 1.375rem; font-weight: 300; letter-spacing: -1px; font-family: 'GmarketSans';} .logo .logo_img {margin-right: .5rem;} .logo img {height: 2rem;} .logo a {display: flex; align-items: center; padding-right: .25rem; color: #090A0B; height: var(--header-height);} .logo span {margin-bottom: -.25rem;} .logo span strong {font-weight: 500;} .logo_big {flex-direction: column; align-items: normal; font-size: 2rem; margin-bottom: 3.5rem;} .logo_big .logo_img {margin: 0 0 1rem;} .logo_big .logo_img img {height: auto;} .login h2 {line-height: 1.75rem; font-size: 1.75rem; letter-spacing: -.4px; padding: .5rem 0; margin-bottom: .5rem;} .join h2 {border-bottom: 1px dashed #DADCE0; padding-top: 0;} header nav {margin-left: 5rem; font-family: 'GmarketSans'; align-self: flex-end;} header nav ul {display: flex;} header nav ul li {margin: 0 .75rem;;} header nav ul li:hover a {border-color: #9D57F4; color: #9D57F4;} header nav ul li.active a {border-color: #6554C0; color: #6554C0;} header nav ul li a {display: flex; align-items: center; height: calc(var(--header-height) - .25rem); padding: 0 .5rem; color: #2D3038; border-bottom: 2px solid transparent; font-size: 1.125rem;} header nav ul li a span {display: flex; justify-content: flex-start; align-items: baseline;} header nav ul li a i {background-color: #090A0B; display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; padding-top: 6px; border-radius: var(--border-radius); font-style: normal; font-weight: bold; font-size: 25px; color: #fff;} header nav ul li.active a i {background: #6554C0;} header nav ul li:hover a i {background: #9D57F4;} .member_info .popup {display: none;} .member_info .popup_panel {min-width: 20rem;} .member_info {margin-left: auto; position: relative;} .member_info .member {display: flex;} .member_info .member_pic {border-radius: 50%; overflow: hidden; width: 3rem; height: 3rem;} .member_info .member_pic img {width: 100%; height: 100%;} .member_info .member_details strong {font-size: 1rem;} .member_info .member_details span {font-size: .75rem;} .member_info span + span:before {content: ""; display: inline-block; width: 1px; height: 8px; background: rgba(9, 10, 11, 0.29); margin: 0 .5rem;} .member_info .btn-link {color: #000; text-decoration: underline; padding: 0;} .member_info .member > a {display: flex; align-items: center; position: relative; justify-content: center;} .member_info .new::after {content: 'N'; display: flex; align-items: center; justify-content: center; color: #FFF; font-size: .5rem; font-weight: 600; width: .875rem; height: .875rem; border: 2px solid #fff; border-radius: 50%; position: absolute; right: -.125rem; top: -.125rem; background: #1A59C8;} .member_info .team {display: inline-block;margin-left: .5rem;padding: .125rem .5rem;background-color: #DFE1E6;border-radius: var(--border-radius);} .member_info .btn_mypage {margin-left: 15px;} .member_info .auth_admin {color:red;font-style: italic;} .member_info .member_toggle {width: 2rem; height: 2rem;} .member_info .member_toggle + .popup {top: calc(var(--header-height) - .5rem); left: auto; right: 1rem; transform: none;} .member_info .member.divide > div:first-child {flex: 0;} .member_info .list {border-top: 1px solid #E0E2EC; margin-top: 1rem;} .member_info .list li a {font-size: .87rem; padding: .5rem;} .member_info .list li a:hover {background: #091E420A; text-decoration: none;} .icon.shortcut {width: 1rem; margin-left: .5rem;} .member_info .member.edit {flex-direction: column; padding-top: 0; align-items: center;} .member_info .member.edit .member_pic {width: 6rem; height: 6rem; margin-bottom: .5rem;} .member_info .member.edit button {width: 100%; margin: 0; margin-top: .5rem;} .accordion button.title::after, .ui-datepicker-close::after, i[class*="icon_"], .btn_toggle_search::before, .my_menu .btn_toggle::after, .side_nav > ul > li > a::after {content: ''; width: 1.5rem; height: 1.5rem; background: url(../img/icons.png) no-repeat; display: inline-block;} .my_menu .btn_toggle::after {background-position: -7.5rem 0; margin-left: auto;} .my_menu.opened .btn_toggle::after {background-position: -6rem 0;} .side_nav > ul > li > a::after {background-position: -4.5rem 0; margin-left: auto;} .side_nav li.opened a:after {background-position: -1.5rem -1.5rem;} .side_nav li.opened.depth1 a::after {background-position: -4.5rem -1.5rem;} .btn_toggle_search::before {background-position: -19.5rem 0; margin-right: .25rem;} .opened .btn_toggle_search::before {background-position: -18rem -1.5rem; margin-right: .25rem;} .accordion button.title::after {background-position: -1.5rem 0; margin-left: auto;} .accordion .on button::after {background-position: 0 0;} i.icon_pdf {background-position: -4.5rem -3rem;} i.icon_word {background-position: -3rem -3rem;} i.icon_ppt {background-position: -1.5rem -3rem;} i.icon_excel {background-position: 0 -3rem;} i.icon_graph {background-position: -12.25rem -3rem;} i.icon_lgz {background-position: -6rem -3rem;} i.icon_high {background-position: -7.5rem -3rem;} i.icon_general {background-position: -9rem -3rem;} .ui-datepicker-close::after {background-position: -10.5rem -3rem;} .my_menu {position: relative; border-top: 2px solid #EBECF0; display: flex; align-items: center; justify-content: center; flex-direction: column; margin: 0 -1rem; padding: .5rem 1rem 0;} .my_menu .btn_toggle {display: flex; justify-content: flex-start; align-items: center;width: 100%; height: 34px; padding: 4px .5rem; background:rgba(252, 246, 187, 0.2); border: 1px solid #FFE380; border-radius: 4px; position: relative;} .my_menu .btn_toggle svg {fill: #F4D500;} .my_menu ul {display: none; padding: .625rem 0; background: rgba(252, 246, 187, 0.14);border: 1px solid #FFE380; width: 100%; border-radius: .5rem;} .my_menu.opened ul {display: block;} .my_menu ul li a {display: flex; align-items: center; padding: .25rem 1rem;} .my_menu ul li a:before {content: ''; width: .25rem; height: .25rem; border-radius: 50%; background: #8E9099; margin-right: .5rem;} .my_menu ul li a:hover {text-decoration: underline; text-underline-offset: .25rem;} .menu_title i {background: url(../img/menu-icon.png); display: inline-block; width: 2.5rem; height: 2.5rem;} .menu_title i.menu02 {background-position: 0 -2.5rem;} .menu_title i.menu03 {background-position: 0 -5rem;} .menu_title i.menu04 {background-position: 0 -7.5rem;} .menu_title i.menu05 {background-position: 0 -10rem;} .menu_title i.menu06 {background-position: 0 -12.5rem;} .menu_title i.menu07 {background-position: 0 -15rem;} .menu_title i + div {display: flex; flex-direction: column; font-size: .675rem; font-weight: 300; color: #6B778C; margin-left: .5rem; line-height: 1rem;} .menu_title i + div strong {font-size: 1rem; font-weight: 700; color: #42526E; line-height: 1.5rem;} .menu_title {display: flex; align-items: center; margin: 1rem 0 0; width: auto; border-bottom: 1px dashed #E0E2EC; padding-bottom: .5rem;} .side_nav li > ul {display: none;} .side_nav li a {position: relative;display: flex; align-items: center; font-size: 14px; padding: 15px .5rem 12px;line-height: 130%;} .side_nav li li:hover a, .side_nav li.active a {color: #0052CC;} .side_nav li.opened > a, .side_nav > ul > li:hover > a {background-color: rgba(9, 30, 66, 0.04); font-weight: 500; color: #0052CC; border-radius: 3px;} .side_nav > ul > li.opened > a {font-weight: 500;} .side_nav li ul {display:none;padding-top: 4px;padding-bottom: 4px;} .side_nav li.opened ul {display:block;} .side_nav li > ul > li {border-bottom: 1px dashed #B3BAC5; margin: 0 1rem;} .side_nav li > ul > li > a {padding: 12px 0 6px 0;font-size: 13px;} .side_nav li > ul > li > a:after {display: none;} .side_nav li > ul > li > ul > li > a {position: relative;padding-left: 43px;} .side_nav li > ul > li > ul > li > a:before {position: absolute;top: 17px;left: 30px;width: 6px;height: 2px;background: #fff;content: "";} .btn_toggle_menu {position: absolute; top: 0; width: 2.5rem; height: 2.5rem; padding-left: 10px; display: flex; align-items: center; border-radius: 0;} aside .btn_toggle_menu {right: .5rem;} .toggle_panel {display: flex; align-items: center;} .btn_toggle_panel {position: absolute; left: 100%; border-radius: 0 .25rem .25rem 0; background: rgba(255, 255, 255, 0.8); box-shadow: 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 8px 12px 0px rgba(9, 30, 66, 0.15); width: 1rem; height: 3rem;} .btn_toggle_panel svg {fill: #0265DC; width:100%;} .toggle_panel.opened .btn_toggle_panel svg {transform: rotate(180deg);} .accordion li {border: 1px solid #C4C6D0;} .accordion li:not(:first-child) {margin-top: 1rem;} .accordion button.title {border-radius: 0; font-size: 1.5rem; display: flex; align-items: center; width: 100%; padding: 1rem 1.5rem;} .accordion button + div {display: none; border-top: 1px solid #C4C6D0; background: #F8F8FB; padding: 1.5rem;} .accordion .on button + div {display: block;} /* switch */ .switch {font-size: .875rem; display: flex; margin-left: 1rem;} .switch input {opacity: 0; width: 0; height: 0;} .switch span {width: 2.5rem; height: 1.25rem; background: #E5E0EC; border-radius: 1rem; position: relative; padding: .125rem; transition: .4s; box-sizing: border-box; display: flex; align-items: center; margin-right: .5rem;} .switch span::before {content: ''; position: absolute; background: #78767F; border-radius: 50%; width: 1rem; height: 1rem; transition: .4s; left: .125rem;} .switch input:checked + span {background: #6868AC; border-color: #0052CC;} .switch input:checked + span::before {left: 1.375rem; background: #fff;} /* .switch i {position: absolute; width: 12px; height: .125rem; background: #fff; left: .5rem; transform: rotate(-45deg); transition: .4s;} .switch i::after {content: ''; position: absolute; width: .125rem; height: 12px; background: #fff; margin-left: 5px; margin-top: -5px; transition: .4s;} .switch input:checked + span i {background: #0052CC; left: 1.875rem;} .switch input:checked + span i::after {background: #0052CC; margin-left: 0; height: 6px;} */ .hamburger-icon {width: 20px; height: 18px; position: relative; cursor: pointer; display: inline-block; -webkit-transform: rotate(-90deg); transform: rotate(-90deg);} .hamburger-icon span {background-color: #fff; position: absolute; border-radius: 2px; -webkit-transition: .3s cubic-bezier(.8,.5,.2,1.4); transition: .3s cubic-bezier(.8,.5,.2,1.4); width: 100%; height: 2px; display: block; left: 0;} .hamburger-icon span:hover {background-color: var(--light-color-hover);} .hamburger-icon span:nth-child(1) {left: 0; top: 5px; width: 20px; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition-delay: 150ms; transition-delay: 150ms;} .hamburger-icon span:nth-child(2) {left: 2px; top: 13px; width: 10px; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition-delay: 50ms; transition-delay: 50ms;} .hamburger-icon span:nth-child(3) {left: 8px; top: 13px; width: 10px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition-delay: .1s; transition-delay: .1s;} body.menu-opened .hamburger-icon {-webkit-transform: rotate(0); transform: rotate(0);} body.menu-opened .hamburger-icon span {width: 100%; height: 2px; display: block; left: 0;} body.menu-opened .hamburger-icon span:nth-child(1) {top: 0; width: 80%; -webkit-transform: rotate(0); transform: rotate(0);} body.menu-opened .hamburger-icon span:nth-child(2) {top: 8px; -webkit-transform: rotate(0); transform: rotate(0);} body.menu-opened .hamburger-icon span:nth-child(3) {top: auto; bottom: 0; width: 80%; -webkit-transform: rotate(0); transform: rotate(0);} .main nav {background: #FAFBFC; position: relative; padding-top: 2.5rem;} .main nav::after {content: ''; position: absolute; width: .5rem; height: 100%; top: 0; right: 0; opacity: 0.07; background: linear-gradient(270deg, #091E42 0%, rgba(9, 30, 66, 0.55) 30.43%, rgba(9, 30, 66, 0.17) 55.79%, rgba(9, 30, 66, 0.00) 100%);} .main nav li {border-bottom: 2px solid #EBECF0;} .main nav li:first-child {border-top: 2px solid #EBECF0;} .main nav li a {display: block; padding: .5rem;} .main .btn_toggle_menu:hover, .main nav li:hover {background: #9D57F4;} .main nav li.active {background: #6554C0;} body:not(.menu-opened) .btn_toggle_menu:hover svg, .main nav li:hover svg, .main nav li.active svg {fill: #fff;} .page_header {display: flex; justify-content: space-between; align-items: flex-start; position: absolute; width: calc(100% - 3rem);} body.main .page_header {left: 0; width: 100%;} .page_header h2 {font-size: 1.75rem; line-height: 2rem; margin-top: .25rem;} .breadcrumb {display: flex; font-size: .75rem;} .breadcrumb li {position: relative; display: flex; align-items: center;} .breadcrumb li:not(:first-child, :last-child)::after {content: '/'; margin: 0 .5rem;} .breadcrumb li a {color: #44474E;} .breadcrumb li:last-child a {text-decoration: underline; text-underline-offset: 0.175rem;} .breadcrumb li svg.icon {width: 1rem; height: 1rem;} /* .page_header .favorite {display: flex;} */ /* .page_header .favorite:before {position: absolute;top: -25px;left: 0;font-size: 24px;color: var(--primary-color);font-family: 'Material Icons';content: "\f06f";} */ /* .page_header .favorite.on:before {content: "\e838";} */ .shortcut {display: flex;justify-content: center;align-items: center;} .shortcut svg.icon {width: 1rem; height: 1rem; fill: #fff;} .shortcut .btn {display: flex;justify-content: center;align-items: center;height: 24px;margin-left: 10px;padding: 0 12px;border-radius: var(--border-radius);font-size: 12px;color: #fff;} .page_header .schedule {background-color: #8777D9;} .page_header .todo {background-color: #36B27E;} .page_header .stop {background-color: #E85659;} .page_header .talk {background-color: #00A3BF;} .page_header .information {background-color: #2684FF;} .page_header .stop:hover {background-color: var(--danger-color-hover);} .page_header .talk:hover {background-color: var(--info-color-hover);} .page_header .information:hover {background-color: var(--dark-color-hover);} main [id^="scope-"]:not(.page_header) {height: calc(100% - 2rem);} main [id^="scope-"]:not(.page_header) > div {display: flex; flex-direction: column; margin-top: 3.5rem; height: 100%;} [id^="scope-"] > div > .contents {margin: 0 -1.5rem; padding: 1.5rem; padding-top: 1rem; height: 100%;} .contents {overflow-y: auto; box-sizing: border-box;} .contents.write, .contents .write_area {padding-right: 23rem !important;} .contents .write > div:not(:last-child) {margin-bottom: 1.5rem;} .contents .write > .btn-right {margin-top: 1rem; padding-top: 1rem; border-top: 2px dashed #E0E2EC;} .popup .contents .contents {overflow-y: unset;} .contents > div {margin-bottom: 1.5rem; position: relative;} .contents > div:last-child {margin-bottom: 0;} .contents .box {border: 1px solid #DADCE0; background-color: #fff; border-radius: 3px; padding: 1rem; flex: 1;} .contents .box.list li {padding: .5rem; border-bottom: 1px dashed #E0E2EC; line-height: 1.5rem;} .contents .box.list li input[type="checkbox"] {margin-right: .25rem;} .contents .box.list li:hover {background-color: #EBECF0;} .contents .box.list li.on {background-color: #DEEBFF;} .contents .search_area:before {background: transparent;} .contents .search_area > div {display: block;} .contents .search_area .btn-group .btn {min-width: auto;} /* .list li:not(:first-child) {margin-top: 1rem;} */ .list li a {display: flex; align-items: center; font-size: 18px; line-height: 1.5rem; letter-spacing: -1.4px; color: #2D3038;} .list li a:hover {text-decoration: underline; color: #1A59C8; text-underline-offset: 3px;} .list li.on a {color: #1A59C8;} .list li a:hover svg.icon, .list li.on svg.icon {fill: #1A59C8;} .list li a svg.icon {margin-right: .25rem;} .box_list li {box-shadow: 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 6px 9px 0px rgba(9, 30, 66, 0.04); padding: 1rem; border-radius: .5rem; margin: .125rem .125rem 1rem;} .box_list li > div:last-child {margin-top: .25rem;} .box_list li div.fx div p.ellipsis {max-width: 13rem;} .box_list li div img {height: 2.75rem; margin-left: .5rem;} .box_list li p {padding-bottom: .25rem; font-size: .9375rem; line-height: 1.375rem; letter-spacing: -.4px;} .box_list li p.date, .box_list li p.date ~ p {font-size: .75rem; line-height: 1.125rem; letter-spacing: 0; display: flex; align-items: center;} .box_list li p.date ~ p::before {content: ""; display: block; width: 1px; height: .625rem; background-color: #C4C6D0; margin: 0 .25rem;} .box_list li p svg.icon {width: 1rem; height: 1rem;} .paragraph li {display: flex; line-height: 1.3125rem;} .paragraph li > span {margin-right: .25rem;} .paragraph table {margin-top: .5rem;} .dep2 {margin-left: 1.25rem; flex-direction: column;} .policy {display: flex; flex-direction: column; align-items: center; background: url(../img/policy-bg.png) no-repeat left bottom, linear-gradient(270deg, #F0F0F0 0.13%, #FFF 10.17%, #FFF 90.84%, #F0F0F0 99.55%); border: 2px solid #E0E2EC; padding: 2.75rem 0 1.375rem;} .policy > div {max-width: 62.5rem; min-width: 37.125rem;} .policy > div:not(:last-child) {margin-bottom: 3.25rem;} .policy h3 {font-size: 1.5rem; line-height: 1.5rem; font-weight: 500; margin-bottom: 2.5rem; justify-content: center;} .policy h3 + div > *:not(:last-child) {margin-bottom: 1.5rem;} .policy p {font-size: 1rem; line-height: 1.5rem; white-space: pre-wrap;} .policy p strong {line-height: 1.8125rem; font-weight: 500;} .policy .right_side {display: flex; flex-direction: column; align-items: flex-end;} .policy .right_side > * {margin-bottom:.5rem; width: auto;} .policy .sign_box {margin-top: .5rem; font-weight: 500; white-space: initial;} .policy .sign_box > span {padding: 0 1rem; font-weight: 400;} /* video */ .video .list {overflow-y: auto; height: 22.6875rem;} .video .list li {display: flex; border-bottom: 1px dashed #CDD1D9; padding: .75rem 0; font-size: .875rem; color: #091E42;} .video .list li:first-child {padding-top: 0;} .video .list li:last-child {border-bottom: none; padding-bottom: 0;} .video .list li a {font-size: .875rem; text-decoration: none;} .video .list li:hover a,.video .list li.play a {color: #1473E6;} .video .list li:hover svg.icon {fill: #fff;} .video .list li div {display: flex; flex-direction: column; justify-content: space-around;} .video .list li span {letter-spacing: -.4px; color: #5E6C84;} .video .thumbnail {position: relative; width: 8rem; height: 4.5rem; margin-right: 1.25rem;} .video .thumbnail img {width: 100%; height: 100%;} .video .thumbnail::before {content: ""; position: absolute; width: 100%; height: 4.5rem; background-color: rgba(9, 30, 66, .5);} .video li.play .thumbnail::before {background-color: rgba(20, 115, 230, .5);} .video .thumbnail svg.icon {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); fill: #fff; margin-right: 0;} .popup .popup_contents {margin: 0; padding: 0; max-height: 85vh;} .search_area {position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: .5rem; margin-top: 1rem;} .search_area:before {content: ''; display: inline-block; width: 100%; height: 2px; background: linear-gradient(270deg, rgba(72, 75, 206, 0) 0%, rgba(72, 75, 206, 0.3) 11.09%, rgba(72, 75, 206, 0.3) 90.41%, rgba(72, 75, 206, 0) 100%);} .btn_toggle_search {display: flex; align-items: center; border-radius: .25rem .25rem 0 0; background: linear-gradient(132deg, #4849CE 0%, #3C68C8 100%); color: #fff; padding: .25rem 1rem; font-size: 1rem; position: absolute; bottom: calc(100% - 2px); z-index: 1;} .popup .search_area {margin-top: 0;} .popup .search_area::before {content: none;} .search_area > div {width: 100%; background: url(../img/search-bg.png) no-repeat; background-size: 100% 100%; padding: .5rem 1rem; border-radius: .5rem; box-sizing: border-box; border: 2px solid #B1C3E966; display: none; margin-top: -2px; padding: 1rem 2rem 1.5rem;} .search_area.opened > div {display: block;} .popup .search_area > div {display: block; padding: .5rem 1rem; margin: 0;} .opened .btn_toggle_search {background: #C9C9F1; color: #403294;} .search_area > div input[type="text"] {display: inline-block;height: 2.25rem;} .search_area > div select {display: inline-block;height: 2.25rem;vertical-align: middle;} .search_area > div select option[disabled][selected] {display: none;} .search_area > div dd input[type="text"] {width: 100%;padding: 3px 10px 3px;} .search_area > div dd select {width: 100%;} .search_area > div dd.wh input[type="text"] {width: auto;} .search_area > div dd.wh select {width: auto;} .search_container {display: flex; flex-direction: column;} .search_container .row {display: flex; flex-wrap: wrap; margin: 0 -.75rem; justify-content: center; position: relative;} .search_container .row.input_full {flex-wrap: nowrap;} .search_container .row > * {margin: .5rem .75rem; width: 15rem;} .search_container .row > .btn {margin-left: 0;} .popup .search_container .row > * {width: auto;} .search_container .row.input_full > *:first-child {flex: 1;} .search_area .btn-group {padding-top: 1rem; border-top: 1px dashed #A9ABB4; margin-top: .5rem; justify-content: center;} .search_area .btn-group .btn {min-width: 7.5rem;} .btn-group .btn:not(:first-child) {margin-left: .5rem;} .ui-datepicker-current {display: none;} .ui-datepicker-close {position: absolute; top: 1.25rem; right: 1.5rem; width: 1.5rem; height: 1.5rem; text-indent: -3rem; overflow: hidden;} .ui-datepicker-close:hover {background: none;} .ui-datepicker-close::after {position: absolute; top: 0; left: 0;} .search_area > div .datepicker_box {max-width: 10rem;} .search_area > div .datepicker_box .datepicker {width: 100%;min-width: auto;} .search_area > div .datepicker_box + span {width: auto; margin: 0; display: inline-flex; align-items: center;} /* .search_area > div .datepicker_parea {border-width: 1px;border-style: solid;border-color: var(--control-border-color);background-color: var(--control-readonly-color);} */ .search_area > div .datepicker_parea .datepicker_box {max-width: 160px; position: relative;} .search_area > div .datepicker_parea .datepicker_box input[type="text"] {height: 2.25rem;border: 0;box-shadow: none; border: 2px solid #C4C6D0; background: #fff; padding-right: 2rem;} .search_area > div .datepicker_parea .datepicker_box input[type="text"] + a svg.icon {position: absolute; top: 16%; right: .125rem;} .search_area > div .datepicker_parea span {display: inline-block;vertical-align: top;line-height: 32px;margin: 0 2px;} .search_area > div .btn {vertical-align: middle; display: flex; align-items: center; justify-content: center; line-height: 25px;padding: 0 13px;font-size: 1rem; font-weight: 400;} .search_area > div dd .btn {height: 30px;line-height: 32px;} .search_area > div .qr_url {position: absolute;top: 10px;right: 14px;border:1px solid var(--control-border-color);border-radius:10px;padding: 8px;background: #fff;} .search_area > div .qr_url .fx_box {display: flex;justify-content: start;align-items: center;font-size: 14px;} .search_area > div .qr_url .fx_box .txt {margin-left: 10px;margin-top: 2px;} .search_area > div_footer {padding-top: 10px;border-top: 1px solid var(--control-border-color);text-align: center;} .search_area > div_footer .btn {width: 200px;height: 36px;line-height: 39px;padding: 0 20px 0 30px;background-image: url('../img/common_x/search_white.svg');background-repeat: no-repeat;background-position: 63px 7px;background-size: 22px;} .modal_wrap {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,.5); z-index: 200;} .popup {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 210;} .popup_panel {background: #fff; border-radius: .5rem; box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.30), 0px 6px 10px 4px rgba(0, 0, 0, 0.15); padding: 1.5rem; min-width: 31.25rem;} .popup_panel.full {width: 100vw; height: 100vh;} .modal .popup_panel.full .contents {max-height: calc(100vh - 3.5rem); height: 100%;} .modal .popup_panel {background: #383A3E; border-radius: 0; padding: .25rem;} .modal .popup_contents {background: #FFFBFE; padding: 1rem 1.25rem;} .modal .popup_panel.blue {background: #0054B6;} .modal .popup_panel.green {background: #678800;} .modal .popup_panel.red {background: #B40000;} .modal .popup_panel.orange {background: #E46F00;} .modal .popup_panel.black {background: #383A3E;} .popup_header {display: flex; justify-content: space-between; border-bottom: 1px dashed #C4C6D0; padding-bottom: .75rem; margin-bottom: .75rem;} h4 {font-size: 1.25rem;} .modal .popup_header {color: #fff; border: 0; padding: .75rem .5rem; margin: 0;} .modal .popup_header svg {fill: #fff;} .modal .print_header {position: relative; background: #EFF0FA; box-shadow: 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20); padding: .5rem; z-index: 1;} .modal .print_header + .contents .box {border: 2px solid #E0E2EC; padding: 0;} .popup .pdf_icon {border: 1px solid #e18888;font-size: 10px;padding: 3px 4px 1px 4px;background: #f3a4a4;color: #fff;border-radius: 6px;} .popup .title-area {cursor:move;position: relative;min-height: 45px;padding: 15px 15px 0;font-size: 18px; } .popup .title-area span.title {display: inline-block;flex: 1;width: calc(100% - 60px);line-height: 130%;overflow:hidden;text-overflow:ellipsis;white-space: normal;word-break: keep-all;} .popup .content-area {flex: 1;height: 100%;background: #FFFBFE;padding: 1rem 0.5rem 1.25rem 1.25rem;border-bottom-left-radius: 0;border-bottom-right-radius: 0;overflow-x: hidden;overflow-y: auto;} .popup .content-area h2 {font-family: 'GmarketSans';font-size: 20px;font-weight: normal;margin: 0;text-align: left;margin-bottom: 10px;} .popup .content-area img {width: 100%;} .popup .content-area::-webkit-scrollbar {width: 10px;} .popup .content-area::-webkit-scrollbar-track {background: transparent;} .popup .content-area::-webkit-scrollbar-thumb {background: var(--gray-light);} .popup .content-area::-webkit-scrollbar-thumb:hover {background: var(--gray-dark);} p.title {font-size: 18px; line-height: 18px; color: #5B5E66; letter-spacing: -.6px; margin: 10px 0;} p.title::before {content: ""; display: block; width: 24px; height: 4px; border-radius: 2px; background-color: #FEC846; margin-bottom: .25rem;} /* .popup table th, .popup table td {position: relative; height: 42px; padding: 8px 10px 8px;color: #000; font-size: 14px;font-weight: 400;line-height: 1.5rem; border: 1px solid #E0E2EC; text-align: left; background-color: #fff;} */ .popup table.yellow th {background: rgba(255, 240, 179, 0.4); } /* .popup table thead th {min-width: 40px; text-align: center;} .popup table thead td {min-width: 40px;} .popup table tbody th {background-color: #EDEDED; font-weight: 600; letter-spacing: -1px;} */ /* .popup table tbody td a {display: flex; align-items: center; justify-content: center;} */ /* .popup table tfoot th {background: #4e5b81;border: 1px solid #4e5b81; color: #fff;} .popup table tfoot td {background: #4e5b81;color: #fff;border: 1px solid #4e5b81;} */ /* .popup table tbody td .btn {margin-top: 0;margin-bottom: 4px;} */ .popup table tbody td a.btn.sm {height: 25px;line-height: 24px;padding: 2px 10px 0;} /* .popup table tbody td select {min-width: auto;height: 30px;margin-top: 0;margin-bottom: 4px;} */ .popup table tbody td.np {padding: 0;} .popup table tbody td.np select {margin: 0;min-width: 100%;border: 0;height: 100%;} /* .popup table tbody td input:not(input[type="checkbox"],input[type="radio"]), .popup table tbody td textarea {margin-bottom: 4px;} */ .popup table tbody td .file-group input {margin-bottom: 0;} .popup table tbody td .bl-dot li {display: flex; align-items: flex-start; line-height: 1.125rem; padding: .5rem; word-break: keep-all;} .popup table tbody td .bl-dot li::before {content: ""; display: inline-flex; width: .25rem; height: .25rem; background: #5B5E66; border-radius: 50%; margin-right: .25rem; margin-top: .5rem;} .bl_dot li {display: flex;} .bl_dot li::before, .bl_dot > label::before {content: ""; width: .1875rem; height: .1875rem; background: #000; border-radius: 50%; margin-right: .25rem; margin-top: .5rem; flex-shrink: 0;} .popup table.odd tbody tr td {background: initial;} .popup table.odd tr:nth-child(odd).reverse-even-odd, .popup table.odd tr:nth-child(even){background-color: #f8f8f8;} .popup table.odd tr:nth-child(even).reverse-even-odd, .popup table.odd tr:nth-child(odd){background-color:#fff;} .popup table.odd tbody tr th {background: #fff;} .popup table tbody td .field-group input, .popup table tbody td .file_upload_table .btn {margin-bottom: 0;line-height: 30px;} .popup table tbody td .file_upload_table td {border: 0;padding: 1px 1px 1px;text-align: left;} .popup .content-area {border-width: 4px; border-style: solid;} .popup .content-area .tabs li.active button {background: #0054B6;} .popup .content-area .w_box {padding: 10px 15px;background: #fff;border: 1px solid var(--gray-dark);} .popup .content-area .cc-form {width: 100%;} .popup .content-area .cc-form > li {margin-bottom: 18px;padding: 0 5px;} .popup .content-area .cc-form > li div.inline {display: inline-block;} .popup .content-area .cc-form > li.col-2 {padding: 0;} .popup .content-area .cc-form > li.col-3 {padding: 0;} .popup .content-area .cc-form > li.col-4 {padding: 0;} .popup .content-area .cc-form > li.col-2 div.inline {float: left;width: 50%;padding: 0 5px;} .popup .content-area .cc-form > li.col-3 div.inline {float: left;width: 33.33%;padding: 0 5px;} .popup .content-area .cc-form > li.col-4 div.inline {float: left;width: 25%;padding: 0 5px;} .popup .content-area .cc-form > li div.inline .img-box {display: table;width:100%;height: 100%;border: 1px solid #dadada;} .popup .content-area .cc-form > li div.inline .i-cell {display: table-cell;width:100%;vertical-align: middle;text-align: center;} .popup .content-area .cc-form > li div.inline .i-cell img {width: auto;height: auto;max-width: 90%;max-height: 50px;margin: 0 auto;} .popup .content-area .cc-form > li .minicolors-theme-bootstrap .minicolors-swatch {left: 8px;top: 6px;} .popup .content-area .cc-form > li div.inline .minicolors-position-bottom .minicolors-panel {top: -155px;} .popup .content-area .cc-form > li div.inline.lst .minicolors-position-bottom .minicolors-panel {left: -30px;} .popup .content-area .write-bottom .btn-area {margin-top: 30px;} .popup .content-area .write-bottom .btn-area .btn {display: block;width: 100%;} .popup .button-area {text-align: right;} /* .popup .buttonbox {padding-bottom: 1.5rem;} */ .formbox_panel .content-pop {position: absolute;top: 50%;left: 50%;width: 430px;margin-left: -215px;background: #f2f2f2;border: 1px solid var(--control-border-color);padding: 15px;border-radius: var(--border-radius);transform: translate(0,-50%);-webkit-transform: translate(0,-50%);-moz-transform: translate(0,-50%);-ms-transform: translate(0,-50%);-o-transform: translate(0,-50%);z-index: 220;} .content-pop h3 {font-size: 17px;margin-bottom: 7px;} .content-pop textarea {width: 100%;height: 130px;padding: 10px;background: #fff;border-radius: 5px;line-height: 130%;resize: vertical;} .content-pop .button_area {text-align: right;} .map-area {margin-top: 10px;} .map-area #map {display:none;} .map-area .toggle-area {padding: 12px 0 13px;background:#f94d4d url('../img/form/btn_map_open.png') no-repeat right 15px top 50%;background-size: 20px;color: #fff;font-weight: bold;line-height: 100%;cursor: pointer;text-align: center;} .map-area.active .toggle-area {background:#f94d4d url('../img/form/btn_map_close.png') no-repeat right 15px top 50%;background-size: 20px;} .map_controls {left: auto !important; top: .25rem !important; right: .5rem;} .map_controls > div {left: auto !important; right: 0;} .popup .danger_val {color:#000;text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;} .danger20 {background: #fc5050 !important;} .danger19 {background: #fc5050 !important;} .danger18 {background: #fc5050 !important;} .danger17 {background: #fc5050 !important;} .danger16 {background: #fc5050 !important;} .danger15 {background: #ff9e57 !important;} .danger14 {background: #ff9e57 !important;} .danger13 {background: #ff9e57 !important;} .danger12 {background: #ffca62 !important;} .danger11 {background: #ffca62 !important;} .danger10 {background: #ffca62 !important;} .danger9 {background: #ffca62 !important;} .danger8 {background: #fde562 !important;} .danger7 {background: #fde562 !important;} .danger6 {background: #cef761 !important;} .danger5 {background: #cef761 !important;} .danger4 {background: #cef761 !important;} .danger3 {background: #74e374 !important;} .danger2 {background: #74e374 !important;} .danger1 {background: #74e374 !important;} span.danger20 {background: transparent !important;} span.danger19 {background: transparent !important;} span.danger18 {background: transparent !important;} span.danger17 {background: transparent !important;} span.danger16 {background: transparent !important;} span.danger15 {background: transparent !important;} span.danger14 {background: transparent !important;} span.danger13 {background: transparent !important;} span.danger12 {background: transparent !important;} span.danger11 {background: transparent !important;} span.danger10 {background: transparent !important;} span.danger9 {background: transparent !important;} span.danger8 {background: transparent !important;} span.danger7 {background: transparent !important;} span.danger6 {background: transparent !important;} span.danger5 {background: transparent !important;} span.danger4 {background: transparent !important;} span.danger3 {background: transparent !important;} span.danger2 {background: transparent !important;} span.danger1 {background: transparent !important;} .popup table#tbl_checklist.focus tr td {color: rgba(84, 84, 84, 0.3);} .popup table#tbl_checklist.focus tfoot tr td {color: rgba(255, 255, 255, 0.3);background: rgba(78, 91, 129, 0.5);border: 1px solid rgba(78, 91, 129, 0.4);} .popup table#tbl_checklist.focus tr.focus td {color: rgba(84, 84, 84, 1);background: var(--gary-light);} .popup table#tbl_checklist.focus tr.focus td select {background: var(--gary-light)} /* window_popup */ .window_popup main {padding: 0; overflow-y: auto; height: 100vh; background-color: #FDFBFF; border-top: 4px solid #4456CC;} .window_popup main > div {width: 50%; margin: 0 auto; border: solid #DADCE0; border-width: 0 1px; padding-top: 0;} .window_popup .logo {justify-content: center;} .window_popup .logo span {margin-bottom: 0;} .window_popup .logo em {font-family: 'Pretendard';} .window_popup .contents {margin: 0;} .window_popup .contents > p {line-height: 1.5rem; margin: 40px 0 1.5rem;} .window_popup .contents > p input[type="checkbox"] {margin-left: .25rem;} .window_popup h3 strong {padding: 0 .125rem;} .window_popup h3 em {font-size: .875rem; color: #0747A6; margin-left: .375rem;} .window_popup .bl_dot > label::before {width: .25rem; height: .25rem; margin-top: 0; background-color: #5B5E66;} .window_popup label input[type="radio"] {margin-left: .5rem;} .window_popup .unit_box .unit {font-size: .9375rem; font-weight: 700;} .window_popup .upload_file .btn {height: 1.875rem;} .window_popup .upload_file .btn:first-child {width: calc(100% - 5.8125rem);} .window_popup:not(.popup.window_popup) .btn-top {right: 36rem;} .window_popup table th {line-height: 1rem; padding: .125rem 1rem; height: 2.625rem; letter-spacing: -.4px;} .window_popup table th strong {font-size: .75rem; color: #0747A6;} .window_popup table th em {font-size: .75rem; font-weight: 400; color: #0747A6;} .window_popup table th em.warn {color: #BB121A; background: none!important;} .window_popup table td {padding: .375rem 1rem;} .window_popup .message .ol_counter ol {display: inline-flex;} .window_popup .message .ol_counter li {align-items: center; display: flex; margin-right: .375rem;} .window_popup .message .ol_counter li > span {width: .75rem; height: .75rem; border: 1px solid #0065FF; font-weight: 600; color: #0065FF; background: none; margin-right: .125rem;} /* message */ .message {padding: 1rem; border-radius: .1875rem; margin-bottom: .5rem;} .message h3 {font-size: 1rem; color: #091E42; margin-bottom: .25rem;} .message h3 svg.icon {margin-right: .5rem;} .message h3 + div {margin: 0 0 0 2rem; display: flex; flex-wrap: wrap;} .info {background: rgba(222, 235, 255, 0.40);} .info svg.icon {fill: #0052CC;} .access_code {display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; background: url(../img/access_code-bg.jpg) no-repeat center; background-size: cover;} .access_code .box {border: 4px solid #091E42; background: rgba(255, 255, 255, 0.96); border-radius: .5rem; padding: 3.75rem 0; box-sizing: border-box; display: flex; align-items: center; flex-direction: column; min-width: 75rem;} .access_code h2 {font-size: 2.25rem; line-height: 2.25rem; margin-bottom: 1.8125rem; letter-spacing: -.4px;} .access_code .btn {height: 2.25rem; width: 7.6875rem;} @media screen and (max-width: 980px) { /* .popup {max-height: calc(100vh - 140px);} */ .popup table thead th {min-width: 30px;font-size: 12px;} .popup table thead td {min-width: 30px;font-size: 14px;} .popup table tbody th {font-size: 12px;} .popup table tbody td {font-size: 14px;} .popup table tfoot th {font-size: 12px;} .popup table tfoot td {font-size: 12px;} } .popup .ui-resizable-e {display: none !important;} .popup .ui-resizable-s {display: none !important;} .of_rse {display: none !important;position: absolute;bottom: 0;right: 0;} .popup.fullscreen {left: 0 !important;top: 0 !important;} .fullscreen .of_rse {display: none !important;} .fullscreen .formbox_panel {width: 100% !important;height: 100% !important;max-height: 100%;} .popup.fullscreen .overlay_gen_box {width: 100% !important;height: 100% !important;max-height: 100vh;} .popup.fullscreen .btn_formbox_close {display: none;} .popup.fullscreen .btn {right: 12px;} .popup.fullscreen {width:100vw;height:100vh;top:0;left:0;margin:0 !important;} @media screen and (max-width: 520px) { .popup .content-area {min-width: auto;} } .dashboard {min-width: 1150px;} .dashboard .fx {display: flex; justify-content: space-between; align-items: stretch;} .dashboard .item {width: 33.3%; padding: 20px 25px; background: #f4f5fa; border: 1px solid #d1d1d1; border-radius: 10px; margin: 10px; box-shadow: 2px 2px 0px #e6e6e9;} @media screen and (max-width: 1680px) { .dashboard .item.latest {width: 31%; padding: 20px 15px;} } @media screen and (max-width: 1480px) { .dashboard .item.latest {width: 29%; padding: 20px 10px;} } @media screen and (max-width: 1320px) { .dashboard .item.latest {width: 28%; padding: 20px 5px;} } .dashboard .item h2 {display: inline-block; min-width: 230px; margin: 0 0 15px; font-size: 14px; padding:8px 10px 4px; background: #fff; box-shadow: 2px 2px 0px #e6e6e9; border: 1px solid var(--control-border-color); border-radius: 20px; text-align: center; font-weight: 400;} .dashboard .item.chart4 {flex: 1;} .dashboard .item.chart1 {width: calc(26% - 20px); height: auto;} .dashboard .item.chart2 {width: calc(26% - 20px); height: auto;} .dashboard .item.chart3 {width: calc(48% - 20px); height: auto;} .dashboard .latest-notice {padding: 15px;} .dashboard .latest-notice li {display: flex; justify-content: space-between; align-items: center; padding: 4px 10px 0; font-size: 14px; border-bottom: 1px solid var(--gray-lightx);} .dashboard .latest-notice li:first-child {padding: 5px 10px 0; border-top: 1px solid var(--gray-lightx);} .dashboard .latest-notice li a {flex: 1; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 9px 15px 8px 0;} .dashboard .latest-notice li:hover a {color: #000;} .dashboard .latest-notice li span {font-size: 13px; color: var(--gray);} .dashboard .bar_table {width: 100%; color: #fff;} .dashboard .bar_table th {width: 110px;} .dashboard .bar_table th, td {padding: 3px 3px; text-align: left;} .dashboard .bar_table th div {display: flex; justify-content: center; align-items: center; padding: 28px 10px 24px; background: #bfbfbf; text-align: center; border-radius: 10px; font-size: 14px; font-weight: 400;} .dashboard .bar_table td.sub_tit {width: 50px;} .dashboard .bar_table td.sub_tit div {display: flex; justify-content: center; align-items: center; height: 40px; font-size: 13px; padding-top: 3px; border-radius: 10px;} .dashboard .bar_table td.tit1 div {background: #ef9a9a;} .dashboard .bar_table td.tit2 div {background: #9fa8da;} .dashboard .bar_table td.tit1 div:hover {background: #ff6363;} .dashboard .bar_table td.tit2 div:hover {background: #7182e3;} .dashboard .bar_table div.bar {width: 100%; height: 40px; overflow: hidden;} .dashboard .bar_table div.bar span {display: flex; justify-content: flex-start; align-items: center; height: 40px; animation: right-animate 1s ease; padding-left: 10px; font-size: 13px; padding-top: 3px; border-radius: 0; white-space: nowrap; text-shadow: 1px 1px 1px #585858;} @keyframes right-animate { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } .dashboard .bar_table div.bar1 span {background: #ef9a9a;} .dashboard .bar_table div.bar2 span {background: #9fa8da;} .dashboard .bar_table div.bar1 span:hover {background: #ff6363;} .dashboard .bar_table div.bar2 span:hover {background: #7182e3;} h3.tit4 {max-width: 960px; font-size: 16px; padding: 11px 10px 8px; line-height: 100%; background: var(--primary-color); color: #ffffff;} .page_contents {min-height: calc(100vh - 165px); padding: 10px 0 80px; background-color: #eeeff4;} .page_contents .w_box {padding: 25px 15px; background-color: #fff; border-top: 1px solid var(--control-border-color); border-bottom: 1px solid var(--control-border-color);} .page_contents .w_box.light {background: #f8f8f8;} .page_contents .w_box.inline-block {display: inline-block;} .page_contents .w_box h2.tit {font-size: 16px; padding: 11px 10px 6px; background: var(--primary-color); color: #fff; max-width: 960px;} .page_contents .w_box h3.tit {font-size: 16px; padding: 0 0 0; color: var(--primary-color); border-bottom: 2px solid var(--primary-color); font-weight: bold;} .page_contents .w_box h3.tit2 {position: relative; height: 16px; font-size: 16px; padding: 0 0 0; color: var(--primary-color); font-weight: bold;} .page_contents .w_box h3.tit2 span {height: 16px; padding: 0 8px 0 0; background: #fff; line-height: 100%; z-index: 2;} .page_contents .w_box h3.tit3 {position: relative; height: 16px; font-size: 16px; padding: 0 0 0; color: var(--primary-color); font-weight: bold;} .page_contents .w_box h3.tit3 span {position: absolute; height: 16px; padding: 0 8px 0 0; background: #fff; line-height: 100%; z-index: 2;} .page_contents .w_box h3.tit3:after {position: absolute; width: 100%; height: 1px; background: var(--primary-color); top: 6px; left: 0; content: "";} .table_top {position: relative; display: flex; justify-content: space-between; align-items: flex-end; padding-right: 127px; margin-bottom: .25rem; min-height: 2.25rem;} .table_top.box {background: #ECF2EE; justify-content: center; border: 0; padding: .75rem; margin-top: .75rem;} .table_top.box.fx-js {justify-content: flex-start;} .tab_box {display: flex; justify-content: flex-start; align-items: flex-end;} .btn_tab {width: 150px; height: 30px; line-height: 32px; border: 1px solid #bcbdc1; border-left: 0; border-bottom: 0; background: #f2f2f2; font-size: 12px; color: var(--gray-dark); cursor: pointer; text-align: center;} .btn_tab:first-child {margin-left: 0; border-left: 1px solid #bcbdc1;} .btn_tab.active {height: 36px; line-height: 38px; margin-bottom: -1px; border: 0; border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); background: var(--primary-color); font-size: 14px; font-weight: bold; color: #fff;} .tab_box.wa .btn_tab {width: auto; padding: 0 10px;} .tab {display: flex;justify-content: flex-start;align-items: flex-end;width: 100%;overflow: hidden; border-bottom: 2px solid #C4C6D0;} .tab li {padding: 0;font-size: 12px;text-align: center; margin-right: 1px;} .tab li button {height: 34px;line-height: 18px;border: 0; letter-spacing: -.6px; border-bottom: 0;background: #EFF0FA;color:#1C1B1F;cursor: pointer; font-size: 1rem; border-radius: 8px 8px 0px 0px; padding: 0 1rem;} .tab li.active button, .tab li:hover button {background: linear-gradient(90deg, #5C5CE0 0%, #A373EF 100%);font-size: 18px;color: #fff;} .tab li:first-child.active button {margin-left: 0;} .tab_content {margin-top: .5rem; position: relative;} .tab_content > div:not(.on) {display: none;} .popup .tab li.active button, .popup .tab li:hover button {background: #0054B6;} .page_contents .w_box .tab {max-width: 960px;} .page_contents .w_box .tab-content {max-width: 960px;} .total_count {padding-bottom: 2px; padding-left: 2px; font-size: 13px; font-weight: 500; color: var(--gray); display: flex; align-items: center; white-space: pre;} .total_count::before {content: ""; display: inline-block; width: .25rem; height: .25rem; background-color: #000; border-radius: 50%; margin-right: .25rem;} .total_count em {font-style: normal; font-weight: 600; color: var(--secondary-color); margin: 0 .25rem;} /* .table_top .icon_box {margin-bottom: 5px;} */ /* .table_top .icon_box .btn {width: 35px; height: 35px; padding: 0; border-radius: var(--border-radius); vertical-align: bottom; background-color: #fff; image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated;} .table_top .icon_box .btn_chart {background-image: url('../img/common_x/icon_chart.png'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 18px 18px;} .table_top .icon_box .btn_excel {background-image: url('../img/common_x/icon_excel.png'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 22px 21px;} .table_top .icon_box .btn_ppt {background-image: url('../img/common_x/icon_ppt.png'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 22px 21px;} .table_top .icon_box .btn_ppt_h {background-image: url('../img/common_x/icon_ppt_h.png'); background-repeat: no-repeat; background-position: 50% 30%; background-size: 26px 26px;} .table_top .icon_box .btn_ppt_v {background-image: url('../img/common_x/icon_ppt_v.png'); background-repeat: no-repeat; background-position: 20% 50%; background-size: 26px 26px;} .table_top .icon_box .btn_pdf {background-image: url('../img/common_x/icon_pdf.png'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 19px 19px;} */ /* .table_top .icon_box .btn {background-color: #ddd;} */ h3 {display: flex; align-items: center; font-size: 1.125rem; letter-spacing: -1px; margin-bottom: .5rem;} h3 + .table_top {position: absolute; top: -1rem; right: 0; padding-right: 0;} h3 > svg.icon {margin-right: .25rem;} /* .contents h3 {display: flex; align-items: flex-end; justify-content:space-between; color: #2D3038; font-size: 1.125rem; line-height: 1.5rem; letter-spacing: -.6px; margin-bottom: .5rem;} */ td .icon_box {display: flex; justify-content: center;} .table_top .icon_box .btn {padding: 0 .5rem;} .icon_box .btn + .btn {margin-left: .125rem;} .icon_box .btn svg, .icon_box .btn i {margin: 0;} .icon_box .btn i + label {margin-left: .25rem; font-size: 1rem;} .table_top .icon_box .btn_chart:hover {border: 1px solid #243974;} .table_top .icon_box .btn_excel:hover {border: 1px solid #388961;} .table_top .icon_box .btn_ppt:hover {border: 1px solid #cf4425;} .table_top .icon_box .btn_pdf:hover {border: 1px solid #d81617;} .table_top .icon_box .btn_excel.txt {background-image: url('../img/common_x/icon_excel.png'); background-repeat: no-repeat; background-position: 7px 50%; background-size: 22px 21px; width: auto; padding-left: 35px; padding-right: 7px; line-height: 37px;} .table_top select {position: absolute; right: 0; width: 122px; border-radius: var(--border-radius);} .table_top + .box {margin: .625rem 0 .125rem; border: 1px solid #E9E7DC; border-radius: .5rem .5rem 0 0; background: #F8F7EF;} .table_top + .box .bl_dot {line-height: 21px; letter-spacing: -.4px; margin-left: 1rem;} .table_footer {display: flex; justify-content: space-between; margin-top: 1rem;} /* .table_footer .btn-group {margin-left: auto;} */ .table_footer.forms {width: 100%; max-width: 960px; min-width: 880px;} .table_footer.quiz {width: 100%; max-width: 800px;} table.table th .check_label {margin-top: 3px; padding-left: 18px;} table.table td .check_label {margin-top: 3px; padding-left: 18px;} table.table td span.reguser {display: inline-block; padding: 2px 3px 0; font-size: 9px; white-space: nowrap; color: var(--gray);} table.table td .btn.btn-icon.state2 {background: #fff; color: #000; border: 1px solid #acacac;} /* table.table td .datepicker_box {display: inline-flex;} table.table td .datepicker_box input[type="text"] {min-width: 80px; width: 88px; height: 24px; padding: 1px 5px 0; font-size: 12px; border-top-left-radius: 4px; border-bottom-left-radius: 4px;} table.table td .datepicker_box .btn.btn-icon {width: 24px; line-height: 20px; margin: 0; border-radius:0; border-top-right-radius: 4px; border-bottom-right-radius: 4px;} */ table th.slash {padding: .25rem .5rem; text-align: left; background: #F7F8F7 url('data:image/svg+xml;utf8,');} table th.slash div {text-align: right;} table.write tbody:not(:nth-of-type(1)), .standards tbody + tbody {border-top: 2px dashed #C4C6D0;} table.write td em {display: block;} table.write td .icon_box .btn:hover svg {fill: #9195FF;} table.write th sub {font-size: .625rem; font-weight: 400; width: max-content; margin-bottom: -.25rem; margin-left: .125rem;} table.resizable > tbody > tr:hover {background: #ececec;} .txt_on_pop {width:100%; background: #ffebe8; border: 1px solid #fd9483; border-radius: var(--border-radius); padding: 7px 5px 2px; color:#525a6b; cursor: pointer;} table.table tbody td .txt_on_pop {margin-bottom: 4px;} table.table tbody tr {position: relative;} table.table tbody td .ex_data {display: none; position: absolute; top: -32px; right: 10px; padding: 10px 10px 4px; background-color: #f8f8f8; border: 1px solid var(--gray-dark);} table.table tbody tr:hover td .ex_data {display: block;} table.table td .new {display: flex; align-items: center;} table.table td .new span {display: flex; align-items: center; margin-right: .25rem; font-weight: 600; color: #0265DC;} table.table td .new::before {content: "N"; display: flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; color: #fff; font-size: .6875rem; line-height: .5625rem; border-radius: 50%; background-color: #1A59C8; margin-right: .25rem;} .overflow-x {overflow-x: auto;} .contents .overflow-x {width: calc(100vw - 19rem); box-sizing: border-box;} .overflow-y {overflow-y: auto; border-bottom: 1px solid #C4C6D0; border-top: 2px solid #C4C6D0;} .overflow-y table.table {border-collapse: separate; border-spacing: 0; border: 0;} .overflow-y table.table thead {position: sticky; top: 0; z-index: 1;} .overflow-y table.table thead th {border-top: 0;} .percent-group {display: flex; justify-content: flex-start; align-items: center; width: 100%; max-width: 220px; margin: 0 auto; margin-top: -5px; border-radius: var(--border-radius); overflow: hidden;} .percent-group span {display: inline-block; height: 24px; font-size: 13px; color: #fff; line-height: 27px; vertical-align: middle;} .percent-group span:first-child {background-color: #b0c2f3; text-align: center;} .percent-group span:nth-child(2) {background-color: #ffa8a8;} .percent-group span:nth-child(3) {background-color: #f3f6f9;} .percent-group span.warning {background-color: #ff7b7b;} .state-group {display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 220px; margin: 0 auto; margin-top: -5px; border-radius: var(--border-radius); overflow: hidden;} .state-group span {border: 1px solid #acacac; background-color: #ffffff; display: inline-block; height: 24px; font-size: 13px; color: var(--gray2); line-height: 26px; vertical-align: middle;} .state-group span:first-child {border-right: 0; border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius);} .state-group span:nth-child(2) {border-left: 0; border-right: 0;} .state-group span:nth-child(3) {border-left: 0; border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius);} .state-group span.active {background-color: #ffa8a8; color: #fff;} .state-group span:first-child.active {background-color: #f3f6f9; color: var(--gray2);} .state-group span.success {background-color: #b0c2f3; color: #fff;} .tooltip_box {position: relative;} .tooltip_box .copy_tooltip {display: none; position: absolute; top: -62px; left: 50%; width: 168px; height: 63px; margin-left: -84px; background: url('../img/common_x/tooltip.png') no-repeat 0 0; text-align: center; color: #fff; padding-top: 21px; font-size: 13px; z-index: 10;} .tooltip_box .copy_tooltip.active {display:block; -webkit-animation: cssAnimation 1s forwards; animation: cssAnimation 1s forwards;} @keyframes cssAnimation { 0% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 0;} } @-webkit-keyframes cssAnimation { 0% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 0;} } .sms_area .phone_area {float: left; position: relative; width: 280px; height: 574px; padding-top: 126px; padding-left: 14px; background: url('../img/sms/phone_b.png') no-repeat 0 0;} .sms_area .phone_area .sms_area {width: 253px; height: 327px; background: #fff; border: 1px solid var(--table-border-color); border-radius: 5px; overflow-y: auto; font-size: 14px; color: var(--gray-dark); line-height: 150%; word-break: break-all;} .sms_area .phone_area .txt_phonenumber {position: absolute; top: 87px; left: 45px; font-size: 14px; color: #fff; font-weight: 500;} .sms_area .phone_area .txt_byte {display: block; margin-left: -45px; margin-top: 87px; width: 275px; text-align: center; font-size: 14px; color: #666666;} .sms_area .phone_area .sms_area #sms_contents {width: 100%; height: 325px;} .sms_area .phone_area .sms_area textarea {width: 100%; height: 325px; line-height: 130%; border: 0; resize: none;} .sms_area *::-webkit-scrollbar { width: 4px;} .sms_area *::-webkit-scrollbar-track { background-color:#fff;} .sms_area *::-webkit-scrollbar-thumb { background: #cccccc; border-radius: 0;} .sms_area *::-webkit-scrollbar-thumb:hover { background: #404040;} .sms_area *::-webkit-scrollbar-thumb:active { background: #808080;} .sms_area *::-webkit-scrollbar-button { display: none;} .sms_area .sentence {float: left; width: 350px; margin-left: 10px;} .sms_area .sentence .top {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px;} .sms_area .sentence .top h1 {float: none; font-size: 20px;} .sms_area .sentence .top .btn {padding-top: 3px; padding-left: 39px; padding-right: 18px; background-image: url('../img/common_x/star_border_white.svg'); background-repeat: no-repeat; background-position: 15px 8px; background-size: 19px;} .sms_area .sentence .sentence_list {display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%;} .sms_area .sentence div.item {width: 170px; margin-bottom: 10px;} .sms_area .sentence div.item .btn {width: 100%;} .sms_area .sentence div.item textarea {width: 100%; height: 133px; padding: 9px 10px; font-size: 13px; color: var(--gray-dark); letter-spacing: -0.025em; border: 1px solid var(--control-border-color); border-top: 0; border-radius: 0; line-height: 140%; resize: none;} .sms_area .s_list {float: left; width: 450px; margin-left: 10px; padding-top: 0;} .sms_area .s_list table.table thead th {height: 30px; padding: 4px 10px 0; text-align: left;} .sms_area .s_list table.table thead th .check_label {padding-top: 1px; padding-left: 22px;} .sms_area .s_list table.table thead tr:first-child th {text-align: center;} .sms_area .s_list table.table tbody td {padding: 0;} .sms_area .s_list table.table tbody td ul {width: 180px; height: 373px; padding: 10px 0; overflow-y: auto;} .sms_area .s_list table.table tbody td ul li {padding: 0 10px; text-align: left;} .sms_area .s_list table.table tbody td .check_label {margin: 3px 0; padding-left: 22px;} .sms_area .s_list table.table tfoot td {padding: 11px 20px 8px; text-align: right;} .sms_area .s_list table.table tfoot td span.num {color: var(--warning-color); font-weight: bold; margin-right: 1px;} .sms_area .s_list table.table tfoot td:first-child {text-align: left;} .sms_area .s_list table.table tfoot td .check_label {padding-top: 1px; padding-left: 22px;} .sms_area .s_list .tit_form {padding: 16px 0 14px;} .sms_area .s_list .tit_form label {display: inline-block; width: 40px; font-size: 15px; font-weight: bold;} .sms_area .s_list .tit_form input {width: calc(100% - 40px);} .sms_area .s_list .btn_area2 {margin-bottom: 10px; text-align: right;} .sms_area .s_list .btn_area2 .btn {padding-top: 3px; padding-left: 39px; padding-right: 18px; background-image: url('../img/common_x/format_list_bulleted_white.svg'); background-repeat: no-repeat; background-position: 15px 8px; background-size: 19px;} .sms_area .btn_send {width: 200px; padding-top: 3px; padding-left: 40px; padding-right: 18px; background-image: url('../img/common_x/mobile_screen_share_white.svg'); background-repeat: no-repeat; background-position: 57px 8px; background-size: 19px;} table.form-table {width: 100%; max-width: 960px; min-width: 300px; border-collapse: collapse; border-top: 1px solid var(--table-border-color);} .fullscreen table.form-table {max-width: 100%;} table.form-table th {min-width: 50px; padding: 7px 10px 3px; height: 34px; border: 1px solid var(--table-border-color); text-align: center; font-size: 13px; font-weight: 400; background-color: #eaecf1; line-height: 110%; white-space: nowrap;} table.form-table th.lft {text-align: left; word-break: keep-all; white-space: normal; line-height: 130%;} table.form-table td {height: 34px; padding: 7px 10px 6px; border: 1px solid var(--table-border-color); background-color: #fff; font-size: 13px; line-height: 135%; text-align: left;} table.form-table td.tc {text-align: center;} table.form-table td.narrow {padding: 1px 10px 0;} table.form-table td.has-child {padding: 0;} table.form-table td.has-child table.form-table {border-top: 0; margin-top: -1px;} table.form-table td.has-child table.form-table th {border: 0; border-top: 1px solid var(--table-border-color); border-left: 1px solid var(--table-border-color); padding: 7px 5px 3px; white-space: normal; background: #f8f8f8; font-size: 12px;} table.form-table td.has-child table.form-table td {border: 0; border-top: 1px solid var(--table-border-color); border-left: 1px solid var(--table-border-color); padding: 7px 5px 6px; font-size: 12px;} table.form-table td.has-child table.form-table th:first-child {border-left: 0;} table.form-table td.has-child table.form-table td:first-child {border-left: 0;} .file_upload_table {width: 100%;} table.form-table td .file_upload_table td {border: 0; padding-left: 0; padding: 1px 1px 1px; text-align: left;} table.form-table td.has-child table.form-table td .file_upload_table td {border: 0; padding: 0; text-align: left;} table.form-table td select {min-width: 100px; vertical-align: middle;} table.form-table td input[type="text"] {min-width: 200px; vertical-align: middle;} table.form-table.horizontal td input[type="text"] {min-width: auto; vertical-align: middle;} table.form-table td input[type="text"].full {width: 100%;} table.form-table td input[type="text"].full {width: 100%;} table.form-table td .btn .mi {margin-top: -3px;} table.form-table td textarea.full {display: block; width: 100%; height: 100px;} table.form-table tfoot th {background: #939cb3; color: #fff; border: 1px solid #858da3; border-top: 2px solid #939cb3;} table.form-table tfoot td {background: #939cb3; color: #fff; border: 1px solid #858da3; border-top: 2px solid #939cb3;} .help_area {position: relative; display: inline-flex; align-items: center; vertical-align: middle; overflow: hidden;} .help_area svg.icon {fill: #0054B6;} /* .help_area svg.icon.filled {fill: #505F79;} */ .help_area .tip {position: absolute;bottom: 2.25rem;left: -0.75rem;opacity: 0;transition: 0.3s;z-index: 2; filter: drop-shadow(0px 1px 1px rgba(9, 30, 66, 0.25)) drop-shadow(0px 0px 1px rgba(9, 30, 66, 0.31)); width: max-content; max-width: 16rem; word-break: break-all; padding: 11px 10px 5px;background: #fff;line-height: 140%;border-radius: var(--border-radius);color: #0054B6; text-align: left;} .help_area .tip p:before {position: absolute;bottom: -6px;left: 20px;width: 0;height: 0;border-style: solid;border-width: 6px 6px 0 6px;border-color: #fff transparent transparent transparent;content: "";} .help_area .tip div.tip_table {position: relative;width: max-content;padding: 11px 10px 10px;background: var(--primary-color);line-height: 140%;border-radius: var(--border-radius);color: #fff;} .help_area .tip div.tip_table:before {position: absolute;bottom: -6px;left: 20px;width: 0;height: 0;border-style: solid;border-width: 6px 6px 0 6px;border-color: var(--primary-color) transparent transparent transparent;content: "";} .help_area .tip div.tip_table th, .help_area .tip div.tip_table td {height: auto;padding: 5px 6px 1px;color: #fff;} .help_area .tip div.tip_table td:first-child {max-width: 200px;} .help_area .tip div.tip_table thead th {background: #18264e;} .help_area:hover {overflow: visible;} .help_area:hover .tip {opacity: 1;} .help_area.img .tip p {padding: 11px 11px 11px;} .help_area.left .tip {bottom: auto; left: auto; top: -6px; left: 50px;} .help_area.left .tip p:before {bottom: auto; left: -6px; top: 10px; border-width: 6px 6px 6px 0; border-color: transparent var(--primary-color) transparent transparent;} .help_area.left:hover .tip {bottom: auto; top: -6px; left: 25px;} .help_area.right .tip {bottom: auto; left: auto; top: -6px; left: 50px;} .help_area.right .tip p:before {bottom: auto; left: -6px; top: 10px; border-width: 6px 6px 6px 0; border-color: transparent var(--primary-color) transparent transparent;} .help_area.right:hover .tip {bottom: auto; top: -6px; left: 25px;} .help_area.left .tip div.tip_table:before {bottom: auto; left: -6px; top: 10px; border-width: 6px 6px 6px 0; border-color: transparent var(--primary-color) transparent transparent;} .help_area.right .tip div.tip_table:before {bottom: auto; left: -6px; top: 10px; border-width: 6px 6px 6px 0; border-color: transparent var(--primary-color) transparent transparent;} .tooltip {position: relative;} .tooltip::before {display: none; content: attr(data-tooltip); position: absolute; top: -42px; left: 50%; width: max-content; padding: 11px 10px 5px; background: var(--primary-color); line-height: 140%; border-radius: var(--border-radius); color: #fff; transition: opacity 0.5s ease-out; transform: translateX(-50%); z-index: 550;} .tooltip::after {display: none; position: absolute; top: -8px; left: 50%; margin-left: -7px; width: 0; height: 0; border-style: solid; border-width: 6px 6px 0 6px; border-color: var(--primary-color) transparent transparent transparent; content: ""; z-index: 550;} .tooltip:hover::before {display: inline-block;} .tooltip:hover::after {display: inline-block;} .btn.tooltip:hover {overflow: inherit;} .tooltip.left::before {top: 50%; left: -6px; transform: translate(-100%, -50%);} .tooltip.left::after {bottom: auto; left: 1px; top: 50%; margin-top: -5px; border-width: 6px 0 6px 6px; border-color: transparent transparent transparent var(--primary-color);} .tooltip.right::before {top: 50%; left: 100%; transform: translate(6px, -50%);} .tooltip.right::after {bottom: auto; left: calc(100% + 7px); top: 50%; margin-top: -5px; margin-right: 0; border-width: 6px 6px 6px 0; border-color: transparent var(--primary-color) transparent transparent;} .tooltip.bottom::before {top: auto; bottom: -100%; left: 50%; transform: translate(-50%, 6px);} .tooltip.bottom::after {top: auto; bottom: -6px; left: 50%; margin-left: -7px; width: 0; height: 0; border-width: 0 6px 6px 6px; border-color: transparent transparent var(--primary-color) transparent;} table.form-table td ul.write_tip li {line-height: 160%;} table.form-table.odd th {background-color: unset;} table.form-table.odd th.sth {background-color: var(--primary-color); color: #fff; font-size: 15px;} table.form-table.odd td {background-color: unset;} table.form-table.odd tr:nth-child(odd).reverse-even-odd, table.form-table.odd tr:nth-child(even){background-color:#f8f8f8;} table.form-table.odd tr:nth-child(even).reverse-even-odd, table.form-table.odd tr:nth-child(odd){background-color:#fff;} table.form-table.odd input {background-color:#fff;} table.form-table.odd input[type="text"][readonly]{background-color: #f2f2f2;} table.form-table.odd input[type="text"]:-moz-read-only {background-color: #f2f2f2;} table.form-table.odd input[type="text"]:read-only {background-color: #f2f2f2;} .dn {display: none;} textarea.dn {display: none;} .btn-file-only {display: inline-block;} .btn-file-only input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;} table.form-table .m-box {background: #eee; padding: 20px;} table.form-table .m-box .top {min-height: 62px;} table.form-table .m-box h3 {text-align: center; margin-bottom: 10px;} table.form-table .m-box .top > div {display: flex; justify-content: space-between; align-items: center;} table.form-table td .m-box select {margin-bottom: 0;} table.form-table td .m-box input[type="text"] {flex: 1; min-width: 50px; margin: 0 2px;} table.form-table .m-box .scontents {height: 408px; margin-top: 10px; padding: 10px; border: 1px solid var(--control-border-color); background: #fff; overflow-y: auto;} table.form-table .m-box .scontents::-webkit-scrollbar {width: 5px; padding-left: 5px;} table.form-table .m-box .scontents::-webkit-scrollbar-track {background: transparent;} table.form-table .m-box .scontents::-webkit-scrollbar-thumb {background: #d3d3d3; border-radius: 20px;} table.form-table .m-box .scontents::-webkit-scrollbar-thumb:hover {background: #5c5d5d;} table.form-table .m-box ul li {display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-bottom: 1px solid #a8a8a8;} table.form-table .m-box ul li:first-child {border-top: 1px solid #a8a8a8;} table.form-table .m-box ul li span {margin-top: 3px;} table.form-table .m-box ul li .btn.btn-icon.only {width: 26px; height: 26px; line-height: 28px; padding: 0;} table.form-table .m-box ul li .btn.btn-icon.only .mi {margin-right: 0;} .input_title {border: 1px solid #adadad; padding: 10px 8px 9px 8px; background: #eaecf1; margin-right: -6px;} .number_wrap {display: inline-block; position: relative;} .number_wrap input[type="number"] {padding-right: 28px;} .number_wrap:after {position: absolute; top: 11px; right: 10px; font-size: 13px; color: #333; content: "원";} .number_wrap.percent:after {content: "%";} .popup .img_area .fileinput-preview {width: 100%;text-align: center;border: 0;overflow: hidden;} .popup .img_area .fileinput-preview img {min-width: 100%;max-width: 100%;max-height: 100%;vertical-align: middle;} /* .popup .img_area.no-img {height: 264px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 14px; line-height: 18px; background: #fff;} */ .popup .img_area .m-signature-pad {position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;z-index: 20;} .popup .img_area .m-signature-pad #sign {width: 100%;height: 100%;} .popup .img_area .m-signature-pad canvas {width: 100% !important;height: 100% !important;} .popup .img_area .fileinput-preview {width: 100%;text-align: center;border: 0;overflow: hidden;background: #ffffff url(../img/common/loading4.gif) no-repeat 50% 50%;background-size: auto;} .popup .img_area .fileinput-preview img {min-width: 100%;max-width: 100%;max-height: 100%;vertical-align: middle;} .popup .img_area .m-signature-pad {position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;z-index: 20;} .popup .img_area .m-signature-pad #sign {width: 100%;height: 100%;} .popup .img_area .m-signature-pad canvas {width: 100% !important;height: 100% !important;} .popup .img_area .fileinput-preview2 {width: 100%;text-align: center;border: 0;overflow: hidden;background: #ffffff url(../img/common/loading4.gif) no-repeat 50% 50%;background-size: auto;} .img_area {position: relative; width: 100%; height: 100%; border: 1px solid #DADCE0; display: flex; align-items: center; min-height: 10rem;} .img_area img {width: 100%; height: 100%;} .img_area ul {display: flex; flex-wrap: wrap;} .img_area li {position: relative; display: flex; border: 1px solid #DADCE0; border-radius: .25rem; width: 11.25rem; height: 7.25rem; align-items: center; justify-content: center; margin: .5rem;} /* .img_area:not(.img_upload) ul {margin: -.5rem;} */ .img_area.no-img, .weather_info.no-img {background: #fff url(../img/no-img.png) no-repeat 50%;} .img_upload.no-img {background: #fff url(../img/img-upload.png) no-repeat 50% calc(50% - 1.5rem); justify-content: center;} .img_upload > label, .img_upload.no-img > ul {display: none;} .img_upload.no-img > label {display: inline-flex; position: absolute; top: calc(50% + 2rem);} .img_area.img_upload li .img_control {position: absolute; display: flex; width: 100%; height: 100%; border-radius: 0; align-items: center; justify-content: center;} .img_area.img_upload li .close {position: absolute; top: .5rem; right: .5rem; background-color: #fff; border-radius: 50%;} .img_area.img_upload li .close svg.icon {fill: #74777F; width: 1.125rem; height: 1.125rem;} .img_area .fileinput-preview.thumbnail {width: 100%; min-height: 200px; margin: 0; padding: 8px; line-height: 200px !important; text-align: center; border: 0; background: #f4f4f4; overflow: hidden;} .img_area .fileinput-preview img {min-width: 100%; max-width: 100%; max-height: 100%; vertical-align: middle;} .img_area .button-area {display: flex; justify-content: space-between; margin-top: 12px;} .img_area .btn.btn-file {padding: 1px 20px 7px 20px;} .img_area .btn.btn-file .mi {margin-right: 4px;} .img_area .btn-add {display: inline-block; background: #1a2e8e; outline: 0;} .img_area .btn-add .fileinput-news {font-size: calc(25px * 0.55);} .img_area .btn-remove {display: inline-block; background: #1a2e8e; outline: 0;} ::-webkit-file-upload-button { cursor:pointer;} .img_area .m-signature-pad {position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px; width: calc(100% - 16px); height: calc(100% - 66px); z-index: 15;} .img_area .m-signature-pad #sign {width: 100%; height: 100%;} .img_area .m-signature-pad canvas {width: 100% !important; height: 100% !important; border: 2px dashed var(--primary-color); background: url('../img/common_x/save_alt_primary.svg') no-repeat 50% 50%; background-size: 70px;} .img_area.fileinput-exists .m-signature-pad canvas {background: initial;} .img_area .m-signature-pad.drag-over canvas {background:#fff url('../img/common_x/save_alt_primary.svg') no-repeat 50% 50%; background-size: 70px;} .img_area .m-signature-pad.drag-success canvas {background: transparent; border: 0; border-radius: 0;} .img_area .photo-file-size {position: absolute; top: 12px; left: 12px; color: #fff; font-size: 12px; opacity: 1; padding: 5px 8px 3px; border-radius: 10px; border: 1px solid #dad9d9; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;} .img_area .photo-file-size:empty {padding: 0px; border: 0px;} .img_area .btn-file .fileinput-news {display: block; height: 36px; line-height: 36px; overflow: hidden;} .signature-control-area {margin-top: 10px; padding: 30px 20px 20px; background: #f2f2f2;} .signature-control-area .slider-control-area {display: flex; justify-content: space-between;} .approval ul {display: flex;} .approval li:not(:first-child) {margin-left: 1rem;} .approval a {border: 1px dashed #C4C6D0; border-radius: .25rem; display: flex; flex-direction: column; align-items: center; width: 6.5rem; height: 7.75rem;} /* .approval a {background: #F8F7EF;} .approval .set a {background: #EEF9F9;} .approval .signed a {background: #F2FAF6;} */ .approval .user_img {width: 3.5rem; height: 3.5rem; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-top: .5rem; background: url(../img/icons.png) no-repeat; background-position-y: -4.5rem;} .user_img img {width: 100%;} .approval p {width: 100%; background: #091E4214; padding: .125rem 0; display: flex; justify-content: center; border-bottom: 1px solid #C4C6D0;} .approval span {letter-spacing: -0.4px; background: #091E4214; padding: 0 .25rem; border-radius: 1rem; color: #42526E; margin-top: .5rem;} .approval .set span {background: #0052CC; color: #fff;} .approval .signed span {background: none; margin: 0; flex: 1; display: flex; align-items: center;} .approval span::before {content: '@'; margin-right: .125rem;} .approval .signed span::before {content: none;} .divide {display: flex;} .divide > div {display: flex; flex-direction: column;} .divide > div:not(.approval, .btn-group, .tree), .divide > li {flex: 1;} .divide > div:not(:first-child) {margin-left: 1.5rem;} .divide:not(.popup .divide) > div > div:not(:last-child) {position: relative; margin-bottom: 1.5rem;} /* coach excel upload popup { */ .btn-coach_drag_box {animation: blinkingBackground 1.3s infinite;} @keyframes blinkingBackground{ 0% { background-color: #fdcc83;} 25% { background-color: #ffffff;} 50% { background-color: #fdcc83;} 75% { background-color: #ffffff;} 100% { background-color: #fdcc83;} } ul.coach_img_list {width: calc(100% + 10px); margin-left: -5px;} ul.coach_img_list li {float: left; width: calc(25% - 10px); min-width: 187px; margin: 5px; border:1px solid var(--control-border-color); background: #fff;} ul.coach_img_list li h3 {width: 100%; height: 45px; padding: 5px; background: #243974; color: #fff; border-bottom: 1px solid var(--control-border-color); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} .coach_drag_box {display: flex; width: calc(100% - 10px); height: 150px; margin: 5px; padding: 0; text-align: center; border: 0; background: #f4f4f4; overflow: hidden; border: 2px dashed var(--primary-color); background: url(../img/common_x/save_alt_primary.svg) no-repeat 50% 50%; background-size: 25px;} .coach_drag_box.big {background-size: 50px;} .coach_drag_box.drag-over {background:#e1e9ff url('../img/common_x/save_alt_primary.svg') no-repeat 50% 50%; background-size: 25px;} .coach_drag_box.big.drag-over {background-size: 50px;} .coach_drag_box.drag-over:has( img) {border: 0;} .coach_drag_box.drag-success {background: transparent; border: 0; border-radius: 0;} .coach_drag_box.drag-success.drag-over:has( img) {border: 2px dashed var(--danger-color);} .coach_drag_box img {width: 100%; height: 100%; object-fit: contain;} .fullscreen ul.coach_img_list li {width: calc(16.6% - 10px);} .fullscreen ul.coach_img_list li h3 {height: 53px; font-size: 15px;} .fullscreen .coach_drag_box {height: 240px; background-size: 40px;} /* } coach excel upload popup */ #thick-slider.ui-slider {position: relative; width: 100%; height: 20px; background: #fff; border: 1px solid var(--control-border-color); border-radius: 20px;} #thick-slider.ui-slider .ui-slider-handle {top: 50%; margin-top: -27px; margin-left: -27px; width: 54px; height: 54px; background: url('../img/mobile/slider-handle.png') no-repeat 50% 50%; background-size: contain; border: 0; outline: 0; cursor: pointer;} #thick-slider.ui-slider span {position: absolute;} #thick-slider.ui-slider span.s-dot {top: 6px; left: 6px; width: 8px; height: 8px; background: url('../img/mobile/s-dot.png') no-repeat 50% 50%; background-size: contain;} #thick-slider.ui-slider span.b-dot {top: -1px; right: -1px; width: 20px; height: 20px; background: url('../img/mobile/b-dot.png') no-repeat 50% 50%; background-size: contain;} #bright-slider.ui-slider {background: url('../img/mobile/bright-bar.png') no-repeat 50% 50%; background-size: cover;} /* 안전보건점검활동 팝업 양호,불량 버튼 */ .m_state1 {display: inline-block; padding: 6px 10px 2px; background: var(--primary-color); border-radius: var(--border-radius); color: #fff;} .m_state2 {display: inline-block; padding: 6px 10px 2px; background: var(--danger-color); border-radius: var(--border-radius); color: #fff;} /* 조치 팝업 등에 파일 다운로드 */ .file_download {display: flex; justify-content: start; align-items: center;} .file_download img {display: inline-block; margin-right: 5px;} .file_download a {flex: 1;} /* image view file upload */ .fileinput2 {position: relative; padding:0; width: 200px;} .fileinput2 .thumbnail {display: flex; justify-content: center; align-items: center; width: 100%; height: 200px; white-space:nowrap; text-align:center; overflow:hidden; padding:0px; border: 2px dashed var(--primary-color); background:#f4f4f4 url('../img/common_x/save_alt_primary.svg') no-repeat 50% 50%; background-size: 70px;} .fileinput2 .thumbnail.drag-success {background:#f4f4f4;} .fileinput2 .thumbnail>img {object-fit: contain;} .fileinput2 .btn.btn-file {position: absolute; width: 100%; height:100% !important; top: 0; left: 0; padding: 0; background: unset; border:0; z-index: 20;} .fileinput2 .btn.btn-file:hover {color:#fff; background-color:rgba(137, 137, 137, 0.1);} .fileinput2 .btn.btn-file > input {position: absolute; top: 0; right: 0; margin: 0; opacity: 0; filter: alpha(opacity=0); height: 100%; width: 100%; cursor: pointer;} .file_box3 .filebox.single label {margin-left: 0; color: #fff; border: 0; height: 30px; line-height: 34px;} .file_box3 .filebox.dragover {position: relative; background: #3a4c67;} .file_box3 .filebox.dragover label {background: transparent; border: 1px dashed #fff; border-left: 0; color: #3a4c67;} .file_box3 .filebox.dragover .upload-name {background: transparent; border: 1px dashed #fff; border-right: 0; text-indent: -9999em;} .file_box3 .filebox.dragover:before {position: absolute; top: 50%; left: 165px; margin-top: -9px; font-family: 'Material Icons'; font-size: 24px; content: "\e171"; color: #fff; opacity: 0.8; white-space: nowrap;} .file_box3 .filebox.dragover:after {position: absolute; top: 50%; left: 195px; margin-top: -7px; font-size: 11px; content: "Drag & Drop File Here"; color: #fff; opacity: 0.8; white-space: nowrap;} .file_box3 .filebox.dragover .filebox_input {pointer-events: none;} .file_box3 .filebox.dragover .upload-name::placeholder {background-image: none;} .file_box3 .filebox.dragover .upload-name::-ms-input-placeholder {background-image: none;} .file_box3 .filebox.dragover .upload-name::-ms-input-placeholder {background-image: none;} .file_box3 .fileinput {padding:0; margin-top:10px;} .file_box3 .fileinput .thumbnail {min-width:344px; height:215px; margin-bottom:10px; white-space:nowrap; text-align:center; overflow:hidden; padding:0px; border: 1px solid #bababa; background: #ddd;} .file_box3 .fileinput .view_thumb {max-width: 300px; background: #ddd; height: 630px; overflow: hidden;} .file_box3 .fileinput.fileinput-exists .view_thumb {min-width: auto;} .file_box3 .fileinput.fileinput-new .view_thumb {max-width: 300px;} .file_box3 a.btn.fileinput-exists {padding: 14px 20px 12px;} .file_box3 .btn-file {height: 40px; line-height: 42px; padding: 0 15px;} .file_box3 a.fileinput-exists {height: 40px; line-height: 42px;} .file_box3 .file_area {position:relative; margin-top: 8px; padding: 8px; background: #f4f4f4;} .file_box3 ul.fileList {min-height:140px; border: 2px dashed var(--primary-color); padding: 4px 5px;} .file_box3 ul.fileList li{display: flex; position:relative; float:left; width: 189px; margin: 4px; height:auto; background: #fff; ;} .file_box3 .fileinput-button input {position: absolute; top: 0; right: 0; margin: 0; opacity: 0; filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); font-size: 200px !important; direction: ltr; cursor: pointer;} .file_box3 .thumbnail {width:189px; height:189px; border:1px solid var(--primary-color); padding:0; margin:0;} .file_box3 .fileinput-button {position: relative; overflow: hidden; display: inline-block;} .file_box3 .btn_del {width: 18px; height: 18px; font-size: 14px; position: absolute; top: -7px; right: -7px; cursor: pointer; text-align: center; padding-top: 0px;} .file_box3 .btn_del{background: var(--primary-color); border: 2px solid #fff; border-radius: 100%; color: #fff;} .file_box3 .btn_del:hover {background: var(--primary-color-hover);} .radio_label.in {display: inline-block; position: relative; width: 30px; height: 30px; line-height: 34px; padding: 0; margin: 0; border: 0; border-radius: 30px; text-align: center; cursor: pointer; font-size: 13px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} .radio_label.in input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;} .radio_label.in span.txt {position: absolute; top: 0; left: 0; display: block; width: 30px; text-align: center;} .radio_label.in .checkmark {position: absolute; top: 0; left: 0; height: 30px; width: 30px; border:1px solid #9cabb3; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;} .radio_label.in .checkmark:after {content: ""; position: absolute; display: none; left: -1px; top: -1px; width: 30px; height: 30px; background-color: #d7687d; border:0; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;} .radio_label.in input:checked ~ .checkmark:after {display: block;} .radio_label.in input:checked ~ span.txt {color: #fff;} .table_footer .table_total_count {position: absolute; top: 20px; left: 0;} /* .table_footer .buttonbox {position: absolute; top: 9px; right: 0;} .table_footer .buttonbox .btn {vertical-align: middle;} */ .page_footer {position: fixed; bottom: 0; left: 0; width: 100%; height: var(--pagefooter-height); border-top: 1px solid var(--gray); text-align: right; z-index: 130;} .page_footer .wrap {height: 100%; padding-top: 10px; padding-left: calc(var(--aside-width) + 15px); padding-right: 20px; background-color: #fff;} .session {font-size: 13px; color: var(--gray-dark); font-weight: 600;} .session .time {display: inline-block; font-size:12px; margin-top: -3px; margin-left: 8px; border-radius: var(--border-radius); font-weight: 500;} .cc-list-top {display: none;} .board_list {max-width: 1000px;} ul.table-list {display: table; width: 100%; max-width: 960px;} ul.table-list li { display: table-row;} ul.table-list li.lhead {background: #eff1f3;} ul.table-list li.bo_notice {background: #eff1f3;} ul.table-list li div {display: table-cell; height: 35px; padding: 4px 5px 0; border-bottom: 1px solid #bcbdc1; color: var(--default-color); vertical-align: middle; font-size: 13px; font-weight: 400; line-height: 140%;} ul.table-list li div label {display: none;} ul.table-list li.lhead div {height: 35px; padding: 4px 5px 0; background: #fff; border-top: 1px solid #bcbdc1; border-bottom: 1px solid #bcbdc1; font-size: 13px; font-weight: 600; vertical-align: middle;} ul.table-list li a.more {display: none;} ul.table-list li div.no {width: 80px; text-align: center;} ul.table-list li div.cat {width: 180px; text-align: center;} ul.table-list li div.date {width: 130px; text-align: center;} ul.table-list li div.name {width: 130px; text-align: center;} ul.table-list li.empty {display: table-caption; caption-side: bottom; width: 100%; text-align: center;} ul.table-list li.empty div {display: block; padding-top: 140px; height: 300px; text-align: center;} ul.gallery_list {display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; width: 100%; max-width: 960px; margin-bottom: 20px; gap: 15px;} ul.gallery_list li {width: calc((100% - 30px) / 3); height: 465px; padding: 0 0 28px;} ul.gallery_list li a {display: block; width: 100%; height: 100%;} ul.gallery_list li .image_area {position: relative; width: 100%; height: 310px; border: 1px solid #ececec; overflow: hidden;} ul.gallery_list li .image_area img {position: absolute; top: 50%; left: 50%; min-width: 100%; max-width: 200%; min-height: 100%; transform: translate(-50%, -50%);} ul.gallery_list li .content_area {position: relative; height: auto; padding: 0; letter-spacing: -0.03em; overflow: hidden;} ul.gallery_list li .content_area h1 {float: none; margin-top: 20px; margin-bottom: 4px; font-size: 16px; color: #333333; line-height: 140%; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} ul.gallery_list li .content_area p.content {margin-top: 5px; height: 58px; font-size: 14px; color: #808080; line-height: 140%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;} ul.gallery_list li .content_area p.date {float: right; margin-top: 8px; font-size: 12px; color: #333; font-weight: 400;} .ol_counter ol, .ol_counter tbody {counter-reset: number;} .ol_counter li:not(.bl_dot li), .ol_counter th {counter-increment: number;} .ol_counter li > button::before, .ol_counter li > label button::before, .ol_counter li > span::before {content: counter(number);} .ol_counter th label::before, .ol_counter th p::before, .ol_counter li > p::before, .ol_counter li > .title::before {content: counter(number)'.'; margin-right: .25rem;} .ol_counter li input[type="radio"] {margin-right: .5rem;} h3.question svg.icon {fill: #32ADE6;} .question_list li {display: flex; align-items: center; margin-top: .625rem;} .question_list li > button, .question_list li > label button, .ol_counter li > span {width: 1.25rem; height: 1.25rem; font-size: .625rem; line-height: .625rem; color: #fff; background-color: #A9ABB4; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-right: .625rem; flex-shrink: 0;} .question_list li > button.on, .question_list li > button:hover {background-color: #32ADE6;} .question_list li textarea {flex: 1;} .question_list li .icon_box {margin-left: .625rem; min-width: 3.375rem; flex-shrink: 0; justify-content: flex-start;} .question_list li .upload_file_wrap {margin-left: 1.25rem;} .question_list li > label {width: 100%; padding: .5rem; line-height: 1.5rem;} .question_list li > label p {margin-left: .5rem; align-self: flex-start;} .question_list li > p {width: 100%; font-weight: 600; padding: .5rem 1rem; background-color: #F2FAF6; border-bottom: 1px solid #E0E2EC; line-height: 1.5rem;} .question_list li .img_area {max-width: 15rem;} .question_list li .img_area + textarea {height: 10rem;} /* assesment */ .modal .assessment {padding: 0; min-width: 1252px;} .assessment h3 {margin-bottom: 1rem;} .assessment h3::before {content: ""; display: block; position: absolute;} .assessment h3.edu::before {width: 26.125rem; height: 6.5625rem; background: url(../img/img-edu.png) no-repeat; right: 1.5rem; top: -1px; z-index: 1;} .assessment h3.survey svg.icon {fill:#147AF3;} .assessment h3.survey::before {width: 8.75rem; height: 6.25rem; background: url(../img/survey.png) no-repeat; right: 1.5rem; top: .3125rem; z-index: 1;} .assessment .tab {border-bottom: 0; padding: 0 1.5rem; background: #EFF0FA;} .assessment .tab li {font-size: 1rem; margin-right: .25rem;} .assessment .tab li button {border-radius: 0; background: rgba(165, 173, 186, 0.30); color:#777777; height: 40px; padding: 0 40px; letter-spacing: -1px; line-height: 1.5rem;} .assessment .tab li.active button, .assessment .tab li:hover button {background: #00C7BE; color: #fff;} .assessment .tab li:nth-child(2).active button, .assessment .tab li:nth-child(2):hover button {background: #32ADE6;} .assessment .tab_content {padding: 1.5rem; margin-top: 0;} .assessment .question_list li {flex-direction: column; margin-top: 0; border: 1px solid #E0E2EC; border-top: 0;} .assessment .question_list li:not(.question_list li li):first-child {border-top: 1px solid #E0E2EC;} .assessment .question_list li p + div {width: 100%; padding: 1rem; background: #fff;} .assessment .question_list li li {border: 0; border-bottom: 1px dashed #E0E2EC;} .assessment .question_list li li:not(.correct, .incorrect, .disabled):hover, .assessment .question_list li li:not(.correct, .incorrect, .disabled).on {background: #DEEBFF;} .assessment .question_list li li:not(.correct, .incorrect, .disabled):hover > label button,.assessment .question_list li li:not(.correct, .incorrect, .disabled).on > label button {background: #0265DC;} .assessment .question_list li li:not(.correct, .incorrect, .disabled):hover > label span, .assessment .question_list li li:not(.correct, .incorrect, .disabled).on > label span {color: #0265DC; text-decoration: underline; text-underline-offset: 3px;} .assessment .question_list li.correct {background: rgba(50, 173, 230, 0.14); border: 1px solid #32ADE6;} .assessment .question_list li.correct > label button {background: #32ADE6;} .assessment .question_list li.correct > label span {color: #32ADE6;} .assessment .question_list li.incorrect {background: rgba(255, 100, 100, 0.10); border: 1px solid #FF6464;} .assessment .question_list li.incorrect > label button {background: #FF6464;} .assessment .question_list li.incorrect > label span {color: #BB121A;} .assessment .question_list li.disabled {background: rgba(235, 236, 240, 0.70)} .assessment .question_list li.disabled > label button {background: #BFBFC6;} .assessment .question_list li.disabled > label span {color: #74777F;} .assessment span.title {display: flex; align-items: center; line-height: 2rem; font-weight: 500; margin-top: 1rem;} .assessment span.title::before {content: ""; width: .25rem; height: .25rem; background: #5B5E66; border-radius: 50%; margin-right: .5rem;} .assessment .result {position: relative;} .assessment .result::after {content: ''; position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, 0.3); width: 100%; height: 100%;} .assessment .result_info {display: flex; flex-direction: column; align-items: flex-end; position: fixed; right: 7rem; bottom: 5rem; z-index: 1;} .assessment .result_info p {color: #fff; font-size: 1rem; line-height: 1.3125rem; font-weight: 400;} .assessment .result_info p:nth-child(2) {font-size: 2.5rem; line-height: 2.5rem; font-weight: 600; letter-spacing: -2px; margin-top: .75rem;} .warn {background: #FFFF00 !important;} .alert {background: #FFC000 !important;} .danger {background: #E46C0A !important; color: #fff;} .severe {background: #C00000 !important; color: #fff;} .weather_info {min-height: 30rem; max-height: 30rem;} .standards table th {padding: .25rem .5rem;} .standards table td {padding: .25rem;} .standards em {color: #0265DC; font-weight: bold;} .standards sup::after {content: ') ';} .box.standards_ladder {padding: 2.6875rem 4.0625rem; line-height: 1.5rem;} .standards_ladder h4 {border-bottom: 2px solid red; font-size: 1rem; letter-spacing: -.6px; line-height: 1.5rem; padding-bottom: .5rem; margin-bottom: 1rem; border-bottom: 2px solid #C4C6D0;} .standards_ladder .divide > div:not(:first-child) {justify-content: space-evenly; margin-left: 2.5rem;} .standards_ladder b {display: inline-block; padding-right: 3.75rem; padding-bottom: .375rem;} .standards_ladder em {display: inline-block; padding-top: 1rem;} .standards_ladder .bl_dot li.dep2::before {display: none;} .standards_ladder .input_group li {display: flex; flex-direction: column; flex: 1; padding-right: 2rem;} .standards_ladder .input_group li:last-child {padding-right: 0;} .standards_ladder .input_group p {padding-top: .5rem;} table.split {border: 0; margin: 1.375rem 0 2rem; line-height: 1.25rem; font-size: .875rem;} table.split th {border: 1px dashed var(--table-border-color);} table.split tr:nth-child(2n-1) td:last-child {background: #F7F8F7;} table.split .lv1 {background: #46A0D7; color: #fff;} table.split .lv2 {background: #7FBA2C; color: #fff;} table.split .lv3 {background: #F9AC01; color: #fff;} table.split .lv4 {background: #EC6508; color: #fff;} /* .inspection */ .inspection_list {border: 1px solid #E0E2EC;} .inspection_list h4 {font-size: .75rem; line-height: 1.5rem; font-weight: 600; text-align: center; padding: .5rem 1rem; background: #DEEBFF;} .inspection_list h4 + * {display: flex; flex-wrap: wrap; margin-bottom: -1px;} .inspection_list .title {display: flex; background: #F7F8F7; padding: .5rem 1rem; border-bottom: 1px solid #E0E2EC;} .inspection_list p.title::before {content: none;} .inspection_list .title .input_group {margin-left: auto;} .inspection_list ol > li {width: 25%; border: solid #E0E2EC; border-width: 0 1px 1px 0;} .inspection_list ol > li:nth-child(4n), .inspection_list .check_list li:nth-child(6n) {border-right: 0;} .inspection_list .bl_dot {padding: .5rem 1rem; min-height: 7.625rem; line-height: 1.5rem;} .inspection_list .bl_dot li::before {margin-top: .625rem; margin-right: .5rem;} .inspection_list .bl_dot li.input_group::before {margin-top: 0;} .inspection_list .bl_dot li:not(:last-child) {margin-bottom: .25rem;} .inspection_list .input_group input[type="text"] {width: 2.5rem; height: 1.875rem; min-height: 1.875rem; margin:0 .25rem;} .inspection_list .check_list h4 {background: #FFDEDE;} .inspection_list .check_list li {width: 16.666%; padding: .5rem 1rem; line-height: 1.875rem; letter-spacing: -.4px; border: solid #E0E2EC; border-width: 0 1px 1px 0;} .inspection_list .check_list li.on {background: rgba(251, 233, 233, 0.50);} .inspection_list table p.title {background: none; padding: 0; border: 0; font-size: .875rem; color: #000; white-space: nowrap;} .inspection_list table p.title span {margin-left: auto;} .inspection_list table td {vertical-align: baseline;} .board_write_form {width: 960px;} .board_write_form .form_area {border-top: 1px solid var(--control-border-color);} .board_write_form .form-group {display: flex; justify-content: flex-start; position: relative; border: 1px solid var(--control-border-color); border-top: 0;} .board_write_form .form-group label.title {width: 100px; line-height: 47px; padding: 0 10px; text-align: center; font-size: 13px; font-weight: 400; color: #343643; background-color: #ffffff;} .board_write_form .form-group .inline {flex: 1; display: flex; align-items: center; padding: 5px 10px; background: #fff;} .board_write_form .form-group .title_tag {position: absolute; bottom: 6px; left: 19px; height: 26px; line-height: 26px; padding: 0 10px; border: 1px solid #ddd; color: #ddd; font-weight: 400; font-size: 12px;} .board_write_form .form-group .title_tag:hover {background: #f2f2f2;} .board_write_form .form-group.tag_area {display: none; border: 0;} .board_write_form .form-group.tag_area textarea {width: 100%; height:100px; background: #f2f2f2;} .board_write_form .form-group .file_name {max-width: calc(100% - 490px); margin-top: 4px; word-break: break-all; white-space: normal; display: inline-block; font-size: 13px; line-height: 120%;} .board_write_form .button_area {margin-top: 30px;} .board_write_form .button_area .btn {width: 194px; margin: 0 10px; border-radius: 40px;} .search-area.m-only {display: none;} .board_category_form {float: left; margin-right: 6px;} .table-header {margin-bottom: 10px;} .table-header div {display: inline-block;} .table-header select {vertical-align: top;} .table-header .search-area input {vertical-align: top;} .photo_info {position: relative; max-width: 100%;} .photo_info .shot_time {display: inline-block; position: absolute; bottom: 4px; right: 4px; color: #fff; text-shadow: 1px 1px 1px #000; border: 1px solid #fff; padding: 3px 5px 1px; border-radius: var(--border-radius); font-size: 12px; line-height: 120%;} .photo_info .shot_time2 {display: inline-block; font-size: 11px; line-height: 120%; word-break: keep-all; white-space: normal; text-align: center; min-width: 62px; letter-spacing: -0.08em;} /* 질의/회신(큐엔에이) */ .qna_area { position: relative; padding: 30px 0; font-size: 15px; color: #808080; line-height: 180%; border-bottom: 1px solid var(--control-border-color); } .qna_area .question {position: relative; padding: 13px 15px 12px 65px; margin-left: 30px; border: 1px solid var(--gray-dark); border-radius: 10px; background: var(--background-color);} .qna_area .question h4 {position: absolute; top: 10px; left: -30px; width: 80px;} .qna_area .question h4 span {position: relative; display: block; background: var(--gray-dark); border-top-right-radius: var(--border-radius2); border-bottom-right-radius: var(--border-radius2); font-size: 14px; color: #fff; padding: 3px 18px 0px; text-align: center; letter-spacing: 0.1em;} .qna_area .question h4 span i {position: absolute; bottom: -10px; right: 51px; width: 0; height: 0; border-bottom: 10px solid transparent; border-right: 10px solid var(--gray-dark);} .qna_area .question:first-line {font-weight: bold; color: var(--gray-dark);} .qna_area .answer {position: relative; margin-top: 30px; padding: 38px 15px 12px 65px; margin-left: 30px;} .qna_area .answer h4 {position: absolute; top: 10px; left: -30px; width: 100%;} .qna_area .answer h4 span {position: relative; display: block; width: 80px; border: 1px solid var(--gray-light); border-top-right-radius: var(--border-radius2); border-bottom-right-radius: var(--border-radius2); font-size: 14px; padding: 3px 18px 0px; text-align: center; letter-spacing: 0.1em;} .qna_area .answer h4:after {position: absolute; top: 15px; left: 90px; width: calc(100% - 60px); height: 1px; border-top: 1px solid var(--gray-light); content: "";} /* menu tip */ .menu_help {display:none; position: fixed; bottom: 6px; left: 220px; z-index: 140;} .menu_help.exist {display:block;} .menu_help .menu_help_wrap {position: relative;} .menu_help .title {display: flex; justify-content: center; align-items: center; padding: 4px 12px 0; font-size: 14px; font-weight: 500; background-color: #fff; border: 1px solid var(--default-color); border-radius: var(--border-radius); color: var(--default-color); cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;} .menu_help .title:hover {border: 1px solid #000; color: #000;} .menu_help .title span.mi {font-size: 22px; margin-top: -4px; margin-right: 4px;} .menu_help .tip {display:none; position: absolute; bottom: 37px; left: 0; padding: 15px 15px 12px; font-size:12px; line-height: 140%; background: #fff; border: 2px solid var(--warning-color); border-radius: 10px; font-size: 13px; color: #333; white-space: nowrap; word-break: keep-all;} .menu_help .tip:after {content: ""; position: absolute; top: 100%; left: 37px; width: 0; border-top: 11px solid var(--warning-color); border-left: 11px solid transparent; border-right: 11px solid transparent;} .mypage {width: 400px;} .mypage h1 {font-size: 22px; font-weight: bold;} .mypage .coaching-status {display: flex; justify-content: center; align-items: center; padding: 15px 15px 10px; background: #f8f8f8; border: 1px solid var(--control-border-color); border-radius: var(--border-radius);} .mypage .coaching-status .fx-item {margin: 0 20px; text-align: center;} .mypage .coaching-status .fx-item h3 {font-size: 14px;} .mypage .coaching-status .fx-item p {font-size: 24px; font-weight: bold; color: var(--primary-color);} .mypage .coaching-status .fx-item p span {margin-left: 2px; font-size: 15px; color: var(--gray-dark);} .todo h1 {font-size: 22px; font-weight: bold;} .todo .list_group {width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: 30px 5px;} .todo .list_box {position: relative; width: calc(33.33% - 10px); height: 142px; padding: 25px 15px 10px; background: #f8f8f8; border: 1px solid var(--control-border-color); border-radius: var(--border-radius);} .todo .list_box .tit {position: absolute; top: -14px; left: 0; width: 100%; display: flex; justify-content: center; align-items: center;} .todo .list_box .tit h2 {display: inline-block; background: var(--success-color); text-align: center; font-size: 14px; color: #fff; padding: 5px 10px 1px; border-radius: var(--border-radius);} .todo .list_box ul {height: 105px; padding-right: 10px; overflow-x: hidden; overflow-y: auto;} .todo .list_box ul::-webkit-scrollbar {width: 5px;} .todo .list_box ul::-webkit-scrollbar-track {background: transparent;} .todo .list_box ul::-webkit-scrollbar-thumb {background: #d3d3d3; border-radius: 20px;} .todo .list_box ul::-webkit-scrollbar-thumb:hover {background: #5c5d5d;} .todo .list_box ul li {display: flex; justify-content: space-between; align-items: center; position: relative; font-size: 14px; margin: 5px 0; padding-left: 8px;} .todo .list_box ul li:before {position: absolute; top: 7px; left: 0; width: 3px; height: 3px; background: var(--gray-dark); border-radius: 3px; content: "";} .todo .list_box ul li a {width: calc(100% - 90px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .todo .list_box ul li span {font-size: 13px; color: var(--gray);} .find_section {width: 500px; margin: 0 auto; text-align: left;} .find_section h2 {font-size: 26px; margin-bottom: 40px; text-align: center;} .find_section .login_area {width: 400px; margin: 0 auto; background-color: #fff; border: 1px solid #cbcdd2; border-radius: 4px; padding: 50px 50px 30px;} .find_section input[type="text"] {width: 100%; border:1px solid #cbcdd2; border-radius: 4px; height: 44px; padding:0 10px; margin-bottom:10px;} .find_section .btn {width: 100%; padding: 0; font-weight: 500; font-size: 16px; height: 44px; line-height: 45px;} .find_section p {font-size: 14px; line-height: 160%;} select optgroup {font-size:16px; padding-top:10px;} select optgroup[data-no='1'] {background:#fbdddd;} select optgroup[data-no='2'] {background:#fbf2dd;} select optgroup[data-no='3'] {background:#f1fbdd;} select optgroup[data-no='4'] {background:#ddfbec;} select optgroup[data-no='5'] {background:#ddedfb;} select optgroup[data-no='6'] {background:#ebddfb;} select optgroup[data-no='7'] {background:#fbddfb;} /* oragnization chart */ .organ-chart {margin: 2rem;} .organ-chart ol ol {margin-top: 2.5rem;} .organ-chart ol, .organ-chart ol > li {display: flex; position: relative;} .organ-chart ol > li {flex-direction: column; align-items: center;} .organ-chart ol > li:not(:last-child) {margin-right: 2.5rem;} .organ-chart li > div {min-width: 18.75rem; background: #fff; position: relative; border-radius: .5rem; box-shadow: 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 8px 12px 0px rgba(9, 30, 66, 0.15); border: 1px solid #DADCE0;} .organ-chart li > div.last {position: relative; min-width: 37.625rem; margin-top: 2.5rem;} .organ-chart li > div.last .btn-group {position: absolute; right: 0; top: -2.5rem;} .organ-chart h5 {font-size: 1rem; line-height: 2.5rem; font-weight: 600; color: #fff; display: flex; justify-content: center; background-color: #6B778C; border-radius: .5rem .5rem 0 0;} .organ-chart h5.purple {background: #5243AA;} .organ-chart h5.blue {background: #3E8BF0;} .organ-chart h5.green {background: #36B27E;} .organ-chart h5.cyan {background: #00A3BF;} .organ-chart ul > li {display: flex;} .organ-chart ul > li.title {background: #F4F5F7;} .organ-chart ul > li:not(:last-child) {border-bottom: 1px dashed #DADCE0;} .organ-chart ul > li > span, .organ-chart ul > li a {display: flex; justify-content: center; align-items: center; width: 100%; height: 2.5rem;} .organ-chart ul > li > span:not(:last-child) {border-right: 1px dashed #DADCE0;} .organ-chart ul > li a {color: #DADCE0;} .organ-chart ol > li > div:not(.lv1)::before, .organ-chart .children:not(.lv1)::after, .organ-chart .children + ol::before, .organ-chart .children + ol::after {content: ""; background:#DADCE0; position: absolute; z-index: -1;} .organ-chart ol > li > div::before, .organ-chart .children::after {height: 1.25rem; width: 1px; left: 50%; transform: translateX(-50%);} .organ-chart ol > li > div::before {bottom: calc(100% + 1px);} .organ-chart ol > li > div.last::before {height: 3.75rem;} .organ-chart .children::after {top: calc(100% + 1px);} .organ-chart .children + ol::before {height: 1px; width: calc(100% + 2.5rem); top: -5.125rem;} .organ-chart .children.lv2 + ol::before {top: -8.875rem;} .organ-chart > ol > li:first-child .children + ol::before {left: 50%;} .organ-chart > ol > li:last-child .children + ol::before {right: 50%;} .organ-chart .children + ol.branch::after {width: 1px; height: 3.875rem; top: -5.125rem; left: 100%;} @media screen and (max-width: 1070px) { header nav ul li {min-width: 160px;} } @media screen and (max-width: 1040px) { header nav ul li {min-width: 155px;} } .img_overlay_mask {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.6; z-index: 210;} .img_overlay_mask .formbox_panel {position: relative;} .img_overlay_formbox {display: none; position: fixed; top: 50%; left: 50%; max-height: calc(99.9vh - 100px); background: #fff; border-radius: 0; z-index: 220; transform:translate(calc(-50% + 0.5px), calc(-50% + 0.5px)); -webkit-transform:translate(calc(-50% + 0.5px), calc(-50% + 0.5px)); -moz-transform:translate(calc(-50% + 0.5px), calc(-50% + 0.5px)); -ms-transform:translate(calc(-50% + 0.5px), calc(-50% + 0.5px)); -o-transform:translate(calc(-50% + 0.5px), calc(-50% + 0.5px));} .img_overlay_formbox .btn_formbox_close {position: absolute; top: 18px; right: 29px; width: 25px; height: 25px; background: url('../img/common_x/close_black.svg') no-repeat 50% 50%; background-size:contain; z-index: 20;} .img_overlay_formbox .title-area {position: relative; height: 57px; padding: 18px 30px 12px; font-size: 16px; background-color: #e1e2e7; border-top: 3px solid #4b7aa2; border-bottom: 1px solid #cfd7db; color: #000 !important;} .img_overlay_formbox .title-area span.title {display: inline-block; width: 500px; height: 24px; line-height: 25px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align: middle;} .img_overlay_formbox .content-area {display: flex; justify-content: center; align-items: center; min-height: 400px; max-height: calc(99.9vh - 168px); border-bottom-left-radius: 0; border-bottom-right-radius: 0; overflow-x: hidden; overflow-y: auto;} .img_overlay_formbox .content-area::-webkit-scrollbar {width: 10px;} .img_overlay_formbox .content-area::-webkit-scrollbar-track {background: transparent;} .img_overlay_formbox .content-area::-webkit-scrollbar-thumb {background: #d3d3d3; border-radius: 20px;} .img_overlay_formbox .content-area::-webkit-scrollbar-thumb:hover {background: #5c5d5d;} .coaching_view_box {max-width: 960px; gap: 15px;} .coaching_view_box h2.tit {padding: 10px 10px 5px; background: var(--primary-color); color: #fff;} .coaching_view_box .view_box {padding: 10px; border: 1px solid var(--control-border-color);} .coaching_view_box .view_box table {background: #fff;} .coaching_comment_box {max-width: 960px;} .coaching_view_box .map-area .toggle-area {padding: 13px 0 10px;} .coaching_view_box .map-area #map {border-left: 1px solid var(--table-border-color); border-right: 1px solid var(--table-border-color);} .table .calendar_week th {width: 2.5rem; box-sizing: border-box; padding: .75rem .5rem;} .table .calendar_week th.sat {color: #0054B6;} .table .calendar_week th.sun {color: #B40000;} .calendar_week td {position: relative;} .calendar_week .bar {display: flex; align-items: center;} .calendar_week .bar::before {content: ''; position: absolute; height: 1.5rem; width: 1.5rem; border-radius: 1rem; z-index: 1; margin-left: -.5rem; box-shadow: 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 3px 5px 0px rgba(9, 30, 66, 0.20);} .calendar_week tr:nth-child(5n) .bar:before {background: #6C79E9;} .calendar_week tr:nth-child(5n+1) .bar:before {background: #4DC7B5;} .calendar_week tr:nth-child(5n+2) .bar:before {background: #63BFEE;} .calendar_week tr:nth-child(5n+3) .bar:before {background: #F5B551;} .calendar_week tr:nth-child(5n+4) .bar:before {background: #F0747D;} .calendar_week .bar.x2::before {width: calc((2.5rem * 2) - 1rem);} .calendar_week .bar.x3::before {width: calc((2.5rem * 3) - 1rem);} .calendar_week .bar.x4::before {width: calc((2.5rem * 4) - 1rem);} .calendar_week .bar.x5::before {width: calc((2.5rem * 5) - 1rem);} .calendar_week .bar.x6::before {width: calc((2.5rem * 6) - 1rem);} .calendar_week .bar.x7::before {width: calc((2.5rem * 7) - 1rem);} /* calendar */ .wc_box {background: #fff; border: 1px solid var(--control-border-color); border-radius: 4px; padding: 20px; box-shadow: 6px 6px 4px 0px #dfdfdf;} #calendar {flex: 1;} #calendar .datemove {margin-bottom: 10px; text-align:center;} #calendar .datemove a {display: inline-block; vertical-align: middle; cursor: pointer; color: var(--gray);} #calendar .datemove a:hover {color: var(--gray-dark);} #calendar .datemove h2 {font-size:30px; color:#404040; display:inline-block; font-weight:900; margin:4px 20px 0;} #calendar table {flex: 1; width:100%; height: 100px; border-spacing:0; border-collapse:collapse; border:1px solid #64757f; text-align:left;} #calendar thead th {width: calc(100% / 7); padding:8px 7px 5px 7px; border:1px solid var(--table-border-color); line-height:1.6em; text-align:center; background: var(--gray); opacity: 1; color:#ffffff; font-weight:500;} #calendar th.red {color:#ff000c;} #calendar th.blue {color:blue;} #calendar tbody td {width: calc(100% / 7); padding: 1px; height:100px; border:1px solid var(--table-border-color); line-height:1.6em; vertical-align:top; color:#666666; text-align:left;} #calendar tbody td.today {border: 1px solid #fbbcbc; background: #fff4f4;} #calendar td.gray {color:#ffffff} #calendar td.null {background:#f5f5f5; font-size:10px;} #calendar td p {margin:0; padding:0 4px; margin: 4px -2px; line-height:120%; clear:both;} #calendar td .title_day {padding:0 0 0 4px;} #calendar td .title_day a {display: inline-flex; justify-content: center; align-items: center; width: 24px; height:24px;} #calendar td .title_day a strong {display: inline-block; margin-bottom: -3px; font-size: 13px; color: #606060; text-align: center;} #calendar td .title_day a:hover {font-weight:bold; border-radius:24px; background:#000;} #calendar td .title_day a:hover strong {color:#fff;} #calendar td a.subj {display: flex; justify-content: start; align-items: center; color:#404040; font-size: 13px;} #calendar td a.subj span {color: #fff; padding: 3px 3px 0; border-radius: 4px; margin-right: 3px;} #calendar td a.subj:hover .title {color:blue; font-weight:bold; text-decoration:underline;} #calendar td p.first {padding:0px 0px 0px 4px;} #calendar td p.first a.subj span {width:100%; border-radius: 4px 0px 0px 4px;} #calendar td p.first a.subj .title {display:none;} #calendar td p.range {padding:0;} #calendar td p.range a.subj span {width:100%; border-radius: 0px;} #calendar td p.range a.subj .title {display:none;} #calendar td p.last {padding:0;} #calendar td p.last a.subj span {border-radius: 0px 4px 4px 0px;} #calendar td a.subj span.title {color:#000; width: calc(100% - 35px); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; word-break: break-all;} #calendar td a.subj span.cat1 {background:red;} #calendar td a.subj span.cat2 {background:blue;} #calendar td a.subj span.cat3 {background:green;} #calendar td a.subj span.cat4 {background:#ff5e00;} #calendar td a.subj span.cat5 {background:black;} #calendar td a:hover {text-decoration:none;} #calendar td span.open {color:#ffffff} #calendar td span.open:hover {color:#312783} #calendar td p.empty a span {margin: 0; padding: 0;} #calendar td p.empty a span.title {width: 0; padding: 3px 0 0;} .s_board {width: 360px; display: flex; align-items: stretch; flex-direction: column; margin-top: -10px; margin-bottom: -10px;} .s_board .wc_box {flex: 1; margin-left: 20px; margin-top: 10px; margin-bottom: 10px;} .s_board .wc_box h1 {margin-top: -21px; margin-left: -21px; margin-right: -21px; padding: 8px 10px 4px; background: var(--primary-color); color: #fff; text-align: center; border: 1px solid var(--control-border-color); border-top-left-radius: 4px; border-top-right-radius: 4px; font-weight: bold;} .s_board .scroll_box {max-height: 850px; padding: 0 10px 0 10px; margin-top: 10px; margin-left: -10px; margin-right: -10px; overflow-x: hidden; overflow-y: auto;} .s_board .scroll_box::-webkit-scrollbar {width: 5px;} .s_board .scroll_box::-webkit-scrollbar-track {background: #f5f5f5;} .s_board .scroll_box::-webkit-scrollbar-thumb {background: #d7d7d7;} .s_board .scroll_box::-webkit-scrollbar-thumb:hover {background: #bbbbbb;} .s_board .scroll_box li {width: 100%; font-size: 13px; padding: 10px 0 5px; border-bottom: 1px solid var(--table-border-color);} .s_board .scroll_box li .fx, .s_board .scroll_box li p {margin-bottom: 3px;} .s_board .scroll_box li .fx .fx1 {flex: 1;} .s_board .scroll_box li p.date {display: flex; justify-content: start; align-items: start; flex-direction: row; margin-top: 5px;} .s_board .scroll_box p.day {display: block; font-weight: bold; margin-right: 10px; margin-top: 4px;} .s_board .scroll_box p.st {display: block;} .s_board .scroll_box p.st.today {color: #0092c4;} .s_board .scroll_box p.st.tomorrow {color: #b300b3;} .s_board .scroll_box span.type {display: inline-block; color: #fff; padding: 3px 5px 0; border-radius: 4px; margin-right: 10px; vertical-align: middle;} .s_board .scroll_box span.title {flex: 1; display: inline-block; margin-top: 3px;} .s_board .scroll_box label {font-size: 11px; margin-right: 10px; line-height: 180%; color: #999;} .s_board .scroll_box p.cont {display: block; padding: 8px 10px 5px; border-radius: 4px; white-space: normal; background: #f8f8f8;} .schedule_list {width: 220px; margin-left: 10px; padding: 10px 10px; background: #f5f5f5; border: 1px solid var(--table-border-color);} .schedule_list .cont {height: 100%; overflow-y: auto;} .schedule_list strong {font-size: 13px; color: #606060;} .schedule_list .cont ul {margin-bottom: 20px; padding-right: 10px;} .schedule_list .cont li {margin: 4px 0;} .schedule_list .cont::-webkit-scrollbar {width: 5px;} .schedule_list .cont::-webkit-scrollbar-track {background: #f5f5f5;} .schedule_list .cont::-webkit-scrollbar-thumb {background: #d7d7d7;} .schedule_list .cont::-webkit-scrollbar-thumb:hover {background: #bbbbbb;} .schedule_list a.subj {display: flex; justify-content: start; align-items: center; color:#404040; font-size: 13px;} .schedule_list a.subj span {color: #fff; padding: 3px 3px 0; border-radius: 4px; margin-right: 3px;} .schedule_list a.subj span.title {color:#000; width: calc(100% - 35px); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; word-break: break-all;} .schedule_list a.subj span.cat1 {background:red;} .schedule_list a.subj span.cat2 {background:blue;} .schedule_list a.subj span.cat3 {background:green;} .schedule_list a.subj span.cat4 {background:#ff5e00;} .schedule_list a.subj span.cat5 {background:black;} @keyframes hidetop { 0% {top: 100px;} 100% {top: -500px;} } @keyframes hide2 { 0% {opacity: 1;} 100% {opacity: 0; visibility: hidden} } @-webkit-keyframes hidetop { 0% {top: 100px;} 100% {top: -500px;} } @-webkit-keyframes hide2 { 0% {opacity: 1;} 100% {opacity: 0; visibility: hidden} } .message-pop {animation-iteration-count: 1; animation: hidetop 0.5s 2s forwards cubic-bezier(0, 0.04, 0.65, -0.70); -webkit-animation: hidetop 0.5s 2s forwards cubic-bezier(0, 0.04, 0.65, -0.70); position: fixed; top: 100px; left: 50%; width: 300px; margin-left: -150px; height: auto; padding: 8px; background: #fff; border: 1px solid #c9c9c9; border-radius: 2px; z-index: 501;} .message-pop .title-box {padding-bottom: 5px;} .message-pop .title-box h1 {background: url('../img/mobile/icon_caution.png') no-repeat 0 50%; background-size: 15px 15px; line-height: 27px; font-size: calc(25px * 0.55); padding-left: 20px;} .message-pop .content-box {background: #fff; min-height: 52px; padding: 2px 10px 20px; line-height: 130%; border: 1px solid #c9c9c9; border-radius: 2px; font-size: calc(28px * 0.55); text-align: center;} .message-pop .content-box span {color: red;} .message-pop-shadow {animation-iteration-count: 1; animation: hide2 0.2s 2.2s forwards; -webkit-animation: hide2 0.2s 2.2s forwards; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba( 0, 0, 0, 0.7 ); z-index: 500;} #schedule_list {width: 15%;} /* export pdf */ .cm-area {border: 2px black solid;} .cm-area .cm-top {position: relative; padding: 0;} .cm-area .cm-top .bg {width: 100%;} .cm-area .cm-top h1 {position: absolute; top: 54%; left: 20px; font-size: 24px; font-weight: 500; transform:translate(calc(-50% + 0.5px), calc(-50% + 0.5px)); -webkit-transform:translate(0, calc(-50% + 0.5px)); -moz-transform:translate(0, calc(-50% + 0.5px)); -ms-transform:translate(0, calc(-50% + 0.5px)); -o-transform:translate(0, calc(-50% + 0.5px)); } .cm-area .cm-top img.logo {position: absolute; top: 20px; right: 20px;} .cm-area .top_line {width: 100%;} .cm-area .table-box {padding: 20px;} .cm-area table.cm-table {width: 100%; font-family: nanum gothic; font-size: 14px; letter-spacing: -0.05em;} .cm-area table.cm-table thead th {width: 50%; padding: 10px; background: #ededed; border: 1px solid #000; font-size: 18px; text-align: center; color: blue;} .cm-area table.cm-table thead th:first-child {color: red;} .cm-area table.cm-table tbody th {width: 12%; padding: 8px 10px; background: #ededed; border: 1px solid #000;} .cm-area table.cm-table tbody td {padding: 8px 10px; background: #fff; border: 1px solid #000; text-align: center;} .cm-area table.cm-table tbody td.tl {text-align: left; line-height: 130%;} .page-cm {position: relative; padding: 10px 0 80px;} .page-cm .cm-print {margin: 50px auto 0;} .page-cm .cm-print img {height: 25px; margin-top: 8px; margin-right: 10px;} /* .print_page {width: 21cm; padding: 0; margin: 20px auto;} */ .print-area {border: 2px black solid; background:#fff; height: 257mm; overflow: hidden;} .print_page.portrait {width: 29.3cm;} .print_page.portrait .print-area {width: 100%; height: 170mm;} .print_page table.table th {padding: .5rem 1rem;} table.detail th {padding: 0; margin:0; background: #EDEDED; text-align: left;} table.detail td {padding: 0; margin:0; border-style: 1px var(--table-border-color);; text-align: left;} table.detail th:first-child, table.table td:first-child {border-left: 0;} table.detail tr:first-child th {border-top: 0;} table.detail tr:last-child th {border-bottom: 0;} /* fullCalendar */ .fc-toolbar-chunk > div {display: flex; align-items: center;} .fc .fc-button:focus, .fc .fc-button-primary:focus,.fc .fc-button-primary:not(:disabled).fc-button-active:focus, .fc .fc-button-primary:not(:disabled):active:focus {box-shadow: none;} .fc .fc-button-primary.fc-prev-button , .fc .fc-button-primary.fc-next-button, .fc .fc-button-primary.fc-prev-button:hover, .fc .fc-button-primary.fc-next-button:hover, .fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active {background: 0; border: 0; color: #000;} .fc .fc-button-primary, .fc .fc-button-primary:disabled, .fc-h-event {background: #6868AC; border-color: #6868AC; opacity: 100;} .fc .fc-daygrid-day.fc-day-today {background: #EAE6FF;} .fc-col-header-cell {background: #F7F8F7; line-height: 2.625rem;} .fc .fc-day-other .fc-daygrid-day-frame {background: #F4F5F7;} .fc .fc-day-other .fc-daygrid-day-frame .fc-h-event {background-color: #DFE1E6; border-color: #DFE1E6;} .fc .fc-day-other .fc-daygrid-day-frame .fc-h-event .fc-event-title {color: #42526E !important;} .fc .fc-daygrid-body, .fc .fc-scrollgrid table {width: 100% !important;} .fc .fc-daygrid-event {margin: .375rem !important;} .fc-event .fc-event-main {padding: .375rem;} .fc-h-event .fc-event-title{white-space: pre-line; font-size: .75rem;} #fullCalendar + .info_board {flex: inherit; height: fit-content; margin-top: 3.5rem} .info_board h3 em {font-size: .75rem; margin-left: auto;} .info_board .divide li {display: flex; flex-direction: column; align-items: center; margin-top: 1.5rem;} .info_board .divide li:not(:first-child) {border-left: 1px solid #C4C6D0;} .info_board .divide li span {display: flex; align-items: center; padding-bottom: .5rem;} .info_board .divide li p {display: flex; align-items: center; font-weight: 700;} .info_board .divide li svg.icon {margin-right: .25rem; width: .875rem; height: .875rem;} .info_board > div:last-child {border-top: 1px solid #C4C6D0;} .info_board span.btn, #fullCalendar span.btn {font-size: .6875rem; line-height: normal; margin-left: .25rem;} #fullCalendar .btn.lv1, .info_board .btn.lv1 ,.info_board .lv1 .btn, .range-slider_wrapper.lv1 .tooltip {background-color: #0169B4;} #fullCalendar .btn.lv2, .info_board .btn.lv2 ,.info_board .lv2 .btn, .range-slider_wrapper.lv2 .tooltip {background-color: #8EC54A;} #fullCalendar .btn.lv3, .info_board .btn.lv3 ,.info_board .lv3 .btn, .range-slider_wrapper.lv3 .tooltip {background-color: #F9B001;} #fullCalendar .btn.lv4, .info_board .btn.lv4 ,.info_board .lv4 .btn, .range-slider_wrapper.lv4 .tooltip {background-color: #BB121A;} .info_board .lv1 p, .info_board .lv1 svg.icon {color: #0169B4; fill: #0169B4;} .info_board .lv2 p, .info_board .lv2 svg.icon {color: #8EC54A; fill: #8EC54A;} .info_board .lv3 p, .info_board .lv3 svg.icon {color: #F9B001; fill: #F9B001;} .info_board .lv4 p, .info_board .lv4 svg.icon {color: #BB121A; fill: #BB121A;} /* range_slider */ .range-slider_wrapper {position: relative; width: 100%; margin-top: 3.875rem;} .slider-bar {position: absolute; height: 14px; top: 4px; border-radius: .5rem 0 0 .5rem;} .rangeInput {background: linear-gradient(to right, #0169b436 0%, #79b93042 30%, #f9b00142 70%, #bb121a52 100%); border: solid 1px #00b300; border-radius: .5rem; height: 14px; width: 100%; outline: none; transition: background 450ms ease-in; -webkit-appearance: none; padding: 0 ; border: 0; width: 20.1875rem;} .rangeInput::-webkit-slider-thumb {background-color: transparent; height: 18px; width: 2px; -webkit-appearance: none; cursor: pointer;} .range_value {font-weight: 600;} .range-slider_wrapper .tooltip {position: absolute; background: transparent; top: -44px; padding: .5rem; border-radius: .5rem; color: #fff !important;} .range-slider_wrapper .tooltip::before {display: none;} .range-slider_wrapper .tooltip::after {content: ''; border-color: #0169B4 transparent transparent transparent; display: block; border: .375rem solid; position: absolute; top: 2.125rem;} .range-slider_wrapper.lv1 .tooltip::after {border-color: #0169B4 transparent transparent transparent;} .range-slider_wrapper.lv1 .rangeInput::-webkit-slider-thumb {background-color: #0169B4;} .range-slider_wrapper.lv2 .tooltip::after {border-color: #8EC54A transparent transparent transparent;} .range-slider_wrapper.lv2 .rangeInput::-webkit-slider-thumb {background-color: #8EC54A;} .range-slider_wrapper.lv3 .tooltip::after {border-color: #F9B001 transparent transparent transparent;} .range-slider_wrapper.lv3 .rangeInput::-webkit-slider-thumb {background-color: #F9B001;} .range-slider_wrapper.lv4 .tooltip::after {border-color: #BB121A transparent transparent transparent;} .range-slider_wrapper.lv4 .rangeInput::-webkit-slider-thumb {background-color: #BB121A;} @media print { html, body {background-color: unset; margin: 0; box-shadow: none;} body {min-width: auto;} header, aside .panel, .page_footer, .page_header, .shadow, .btn_toggle_menu, .buttonbox {display: none;} main {min-height: initial; padding: 0; background-color: initial;} body.menu-opened main {padding: 0;} .page_contents {padding: 0; min-width: initial; min-height: initial; background-color: initial;} .page_contents .w_box {padding: 0; border: 0; background-color: initial;} .btn-print, .btn_print, .btn_print_area {display: none;} .popup {top: 0 !important; left: 0 !important; max-height: initial !important; height: auto;} .formbox_panel {width: initial; max-width: initial;} .popup .content-area {max-width: initial !important; min-width: initial !important;} .print_page {margin: 0; padding: 0; border: 0; width: initial; min-height: initial; box-shadow: initial; background: initial; page-break-after: always; overflow: visible;} .print_page {width: 100%; height: auto;} .print_page.portrait {width: 100%;} .print-area {margin: 0; padding: 0; border: 0; overflow: hidden;} figure {margin: 0;} table.form-table.odd th.sth{print-color-adjust:exact; -webkit-print-color-adjust:exact;} .radio_label .checkmark:after {print-color-adjust:exact; -webkit-print-color-adjust:exact;} .page-cm {padding: 0;} .overlay_gen_box {width: 100% !important; min-width: auto !important;} .btn_fullscreen {display: none !important;} } /* 에디터 외부 */ .ck.ck-editor {width: 840px !important;} .ck.ck-editor__main {background-color: #eee; border: 1px solid rgba(0,0,0,.15); padding: 2rem 0;} /* YUI 3.18.1 (build f7e7bcb) Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */ .ck.ck-editor__main {vertical-align: top; width: 840px; color:#000; background:#eee; font-family:initial; font-size:13px; line-height:1.3;}.ck.ck-editor__main body,.ck.ck-editor__main div,.ck.ck-editor__main dl,.ck.ck-editor__main dt,.ck.ck-editor__main dd,.ck.ck-editor__main ul,.ck.ck-editor__main ol,.ck.ck-editor__main li,.ck.ck-editor__main h1,.ck.ck-editor__main h2,.ck.ck-editor__main h3,.ck.ck-editor__main h4,.ck.ck-editor__main h5,.ck.ck-editor__main h6,.ck.ck-editor__main pre,.ck.ck-editor__main code,.ck.ck-editor__main form,.ck.ck-editor__main fieldset,.ck.ck-editor__main legend,.ck.ck-editor__main input,.ck.ck-editor__main textarea,.ck.ck-editor__main p,.ck.ck-editor__main blockquote,.ck.ck-editor__main th,.ck.ck-editor__main td{margin:0; padding:0}.ck.ck-editor__main table{border-collapse:collapse; border-spacing:0}.ck.ck-editor__main fieldset,.ck.ck-editor__main img{border:0}.ck.ck-editor__main address,.ck.ck-editor__main caption,.ck.ck-editor__main cite,.ck.ck-editor__main code,.ck.ck-editor__main dfn,.ck.ck-editor__main em,.ck.ck-editor__main strong,.ck.ck-editor__main th,.ck.ck-editor__main var{font-style:normal;}.ck.ck-editor__main ol,.ck.ck-editor__main ul{list-style:none}.ck.ck-editor__main caption,.ck.ck-editor__main th{text-align:left}.ck.ck-editor__main h1,.ck.ck-editor__main h2,.ck.ck-editor__main h3,.ck.ck-editor__main h4,.ck.ck-editor__main h5,.ck.ck-editor__main h6{font-size:100%; font-weight:normal}.ck.ck-editor__main q:before,.ck.ck-editor__main q:after{content:''}.ck.ck-editor__main abbr,.ck.ck-editor__main acronym{border:0; font-variant:normal}.ck.ck-editor__main sup{vertical-align:text-top}.ck.ck-editor__main sub{vertical-align:text-bottom}.ck.ck-editor__main input,.ck.ck-editor__main textarea,.ck.ck-editor__main select{font-family:inherit; font-size:inherit; font-weight:inherit}.ck.ck-editor__main input,.ck.ck-editor__main textarea,.ck.ck-editor__main select{*font-size:100%}.ck.ck-editor__main legend{color:#000}#yui3-css-stamp.cssreset-context{display:none} /* 에디터 내부 */ .ck.ck-editor__main strong {font-weight: 700;} .ck.ck-editor__main div.ck-content.ck-editor__editable {width: 21cm; min-height: 29cm; margin: 0 auto; padding: 15mm; background: #fff; border: 1px #d3d3d3 solid; overflow-wrap: anywhere; word-break: break-word; letter-spacing: -0.05em;} .ck .ck-widget, .ck .ck-widget.ck-widget_with-selection-handle {margin-top: -1px;} .ck-content .table {margin: 0 auto !important;} .ck-content .table table {width: 100%; border: 0; margin-bottom: -1px;} /* 에디터 테이블 기본 */ .ck-content .table th, .ck-content .table td {padding: 0.4em; border: 1px solid #bfbfbf; font-weight: normal;} .ck-content .table tr:first-child td {border: 1px solid #bfbfbf;} table.table-1 tbody td .ck-content .table tbody td {height: auto;} .ck.ck-editor__main div.ck-content.ck-editor__editable > p {margin-top: -2px;} .ck-content .table td > p {margin-top: -2px;} .ck-content .table td > span {margin-top: -2px;} .ck-content .table td span {vertical-align: middle;} .ck-source-editing-area textarea {left: 0;} @media print { .ck.ck-editor__main {width: auto; background: unset; border: 0; padding: 0; margin: 0;} .ck.ck-editor__main div.ck-content.ck-editor__editable {border: 0; padding: 0;} .ck.ck-editor__main .print_page {page-break-after: auto; margin: 0; padding: 0; border: 0; -webkit-box-shadow: none; box-shadow: none; overflow:hidden;} } .board_view .content_area {vertical-align: top; font-family:initial; font-size:13px; line-height:1.3;}.board_view .content_area body,.board_view .content_area div,.board_view .content_area dl,.board_view .content_area dt,.board_view .content_area dd,.board_view .content_area ul,.board_view .content_area ol,.board_view .content_area li,.board_view .content_area h1,.board_view .content_area h2,.board_view .content_area h3,.board_view .content_area h4,.board_view .content_area h5,.board_view .content_area h6,.board_view .content_area pre,.board_view .content_area code,.board_view .content_area form,.board_view .content_area fieldset,.board_view .content_area legend,.board_view .content_area input,.board_view .content_area textarea,.board_view .content_area p,.board_view .content_area blockquote,.board_view .content_area th,.board_view .content_area td{margin:0; padding:0}.board_view .content_area table{border-collapse:collapse; border-spacing:0}.board_view .content_area fieldset,.board_view .content_area img{border:0}.board_view .content_area address,.board_view .content_area caption,.board_view .content_area cite,.board_view .content_area code,.board_view .content_area dfn,.board_view .content_area em,.board_view .content_area strong,.board_view .content_area th,.board_view .content_area var{font-style:normal;}.board_view .content_area ol,.board_view .content_area ul{list-style:none}.board_view .content_area caption,.board_view .content_area th{text-align:left}.board_view .content_area h1,.board_view .content_area h2,.board_view .content_area h3,.board_view .content_area h4,.board_view .content_area h5,.board_view .content_area h6{font-size:100%; font-weight:normal}.board_view .content_area q:before,.board_view .content_area q:after{content:''}.board_view .content_area abbr,.board_view .content_area acronym{border:0; font-variant:normal}.board_view .content_area sup{vertical-align:text-top}.board_view .content_area sub{vertical-align:text-bottom}.board_view .content_area input,.board_view .content_area textarea,.board_view .content_area select{font-family:inherit; font-size:inherit; font-weight:inherit}.board_view .content_area input,.board_view .content_area textarea,.board_view .content_area select{*font-size:100%}.board_view .content_area legend{color:#000} /* 게시판 에디터 내부 */ .board_view .content_area strong {font-weight: 700;} .board_view .content_area {letter-spacing: -0.05em;} .board_view .content_area .table {margin: 0 auto;} .board_view .content_area .table table {width: 100%; border: 0; margin-bottom: -1px;} /* 게시판 에디터 테이블 기본 */ .board_view .content_area .table th, .board_view .content_area .table td {border: 1px solid #bfbfbf; font-weight: normal;} .board_view .content_area .table tr:first-child td {border: 1px solid #bfbfbf;} .board_view .content_area .table tbody td {height: auto;} .board_view .content_area > p {margin-top: -2px;} .board_view .content_area .table td > p {margin-top: -2px;} .board_view .content_area .table td > span {margin-top: -2px;} /* initial */ .w-rs {width: initial !important;} .mw-rs {max-width: initial !important; min-width: initial !important;} /* login */ .login {display: flex; align-items: center; justify-content: flex-end; height: 100vh; overflow: hidden; background: url(../img/login-bg.jpg) no-repeat center; background-size: cover; padding: 0 20rem;} .join, .m .login {justify-content: center; background-image: url(../img/join-bg.png);} .m .login {padding: 0;} .login form, .login .box {display: flex; flex-direction: column;} .login > .box {min-width: 22.875rem; min-height: 22.875rem; padding: 2.75rem 5.5625rem; background: #fff; box-shadow: 0 1.125rem 1.75rem rgba(9, 30, 66, 0.15), 0px 0px 1px rgba(9, 30, 66, 0.31); border-radius: .5rem; position: relative; bottom: -2rem;} .login .btn-full {width: 100%; padding: 0; background: #6868AC; color: #fff; height: 2.5rem; border: 0;} .login .btn-link {background: linear-gradient(90deg, #6A0DD4 0%, #1A5AC8 51.25%, #02A0B3 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: .75rem;} .join .btn {display: flex;} .login_info li {position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 1.75rem 0; width: 100%;} .login_info li:not(:last-child) {margin-top: 0;} .login_info li:last-child {margin: 2.625rem 0 1.5rem;} .login_info li input[type="text"] , .login_info li input[type="password"] {width: 100%; height: 2.5rem; border-radius: 2px; border: 1px solid #DFE1E5; background: #FFF; padding: .3125rem 2.25rem .1875rem;} .login td input[type="text"] {min-width: 16.25rem;} .join td input[type="text"] {min-width: auto;} .login_info li .input_btn {flex: 1;} .login_info li .input_btn > svg.icon {position: absolute; left: .5rem; z-index: 10;} .login_info li .input_btn > button {right: .5rem;} .login_info li .input_btn > .close {right: 2.25rem; display: none;} .login_info li .btn-link {position: absolute; top: -1.5rem; right: 0;} .login_info li p.msg {position: absolute; bottom: -1.25rem; left: .25rem; white-space: nowrap;} .login_info svg.icon {fill: #090A0B87;} p.msg {display: flex; align-items: center; font-size: 0.625rem; font-weight: bold;} p.msg.error {color: #B40000;} p.msg.info {color: #0054B6;} p.msg::before {content: ''; display: inline-flex; background: url(../img/icons.png) no-repeat;} p.msg.error::before {width: 1rem; height: 1rem; background-position: -22rem -3.5rem; margin-right: .125rem;} p.msg.info::before {width: 1rem; height: 1rem; background-position: -21rem -3.5rem; margin-right: .125rem;} .login footer {position: absolute; font-size: .6875rem; bottom: -2rem; align-self: center; color: #74777F;} .m .login footer {bottom: 1rem;} /* .login .modal {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); width: auto; height: auto; border-radius: .5rem; z-index: 1001; display: none;} .login .modal.active {display: block;} .login .modal h3 {font-size: 1.5rem;} .login .modal h3::before {content: none;} .login .modal h3 + p {font-size: .875rem;} .login .modal .login_info {padding-top: .75rem;} .login .modal .login_info li input[type="text"],.login .modal .login_info li select {min-width: 0; height: 2.25rem;} .login .modal .input-group + span {margin: 0 .25rem;} .login .modal:not(.message) {font-size: 1rem; padding: 2rem 2.5rem; max-width: 19rem;} .login .modal:not(.message) .btn-close {position: absolute; top: 1.75rem; right: 2.5rem; padding: 0;} .login .modal:not(.message) .btn-close svg {width: 1.5rem; height: 1.5rem;} .login .modal .btn {height: 2.25rem;} .login .popup {background: #2d2e2f; box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);} .login .popup tr td .overflow-y {min-height: 5rem; max-height: 45rem; line-height: 1.6;} */ /* 아이디 비밀번호 찾기 */ .login .box.account_find .logo, .login .box.account_find .logo_big .logo_img {margin-bottom: 0;} .login .box.account_find h2 {font-size: 2.125rem; line-height: 2.5rem; letter-spacing: -1px; margin-bottom: 1rem; padding: 0;} .login .box.account_find .login_info li {margin: 1.875rem 0;} .login .box.account_find .login_info li input[type="text"] {padding: .5rem;} .login .box.account_find .table_footer .btn {flex: 1;} .login .box.account_find .table_footer .btn:last-child {margin-left: 1.5rem;} /* join */ .required::after {content: '*'; align-self: baseline; color: red;} .join > .box {padding: 2rem; width: 60rem; bottom: 0;} .join .wrap.contents {min-height: auto; justify-content: center; align-items: center;} .join .wrap.contents li {font-size: 1rem; line-height: 1.75rem;} .join .wrap.contents li:first-child {font-size: 2rem; line-height: 2rem; padding-bottom: 2.5rem;} .join .wrap.contents img {width: 13.0625rem; padding: 5rem 0 2rem 0;} .join .contents {padding-top: 0; margin-bottom: 1.5rem; height: 42rem;} .join .contents > li:not(:last-child) {margin-bottom: 2rem;} .join .contents > li:first-child label {font-size: 1.0625rem;} .join .btn.btn-large {padding: .5rem; border: 0; border-radius: .125rem; width: 22.8125rem; height: 2.5rem; margin: 0 auto;} .join .bar_step {position: absolute; top: 2rem; right: 2rem; display: flex;} .join .bar_step li button {display: block; width: 19px; height: .25rem; margin-left: 1px; background-color: #E0E2EC;} .join .bar_step li:first-child button {border-radius: .25rem 0 0 .25rem;} .join .bar_step li:last-child button {border-radius: 0 .25rem .25rem 0;} .join .bar_step li.on button {background-color: #2D3038;} .join li label {font-size: 1rem; letter-spacing: -.6px; color: #74777F;} .join li label + * {margin-left: 1.875rem; margin-top: .125rem; color: #74777F; letter-spacing: -.4px;} .join li label svg.icon {fill: #A9ABB4; margin-right: .25rem; align-self: flex-start; flex-shrink: 0;} .join li label > p, .join li label > span {font-size: .875rem;} .join li input:checked + label svg {fill: #0265DC;} .join li input:checked ~ p, .join li input:checked + label, .join li input:checked ~ .box, .join li input:checked p {color:#000;} .join li .box {height: 7.375rem; padding: .5rem; border-radius: .25rem; line-height: 1.3125rem;} .join li p {line-height: 1.5rem;} .join li em {color: #0265DC;} .join .bl_dot li::before {background: #74777F;} .join li input:checked ~ .bl_dot li::before {background: #000;} .join li.bl_dot > label {font-size: .875rem; color: #000; line-height: 1.875rem; margin-bottom: .25rem;} .join li.bl_dot > label::before {width: .25rem; height: .25rem; background: #5B5E66; margin-top: 0; margin-right: .5rem;} .join li.bl_dot > label > * {margin: 0 .5rem;} .join .unit_box .unit {font-weight: 700;} .join .unit_box + span {min-width: fit-content; font-weight: 600;} .join .btn-large {background: #A9ABB4;} .join .btn-large.active, .join .btn-large:hover {background: #6868AC;} .sign_box .btn-small.btn-right {padding: 0 .5rem; position: absolute; right: 0; top: 1.5rem;} .sign_box .box {border-radius: .5rem; height: 135px; margin-top: .5rem;} .sign_box {display: flex; align-items: center;} .sign_box > button, .sign_box > img {margin-left: .5rem;} img.sign_img {width: 3.125rem;} .map .pin {position: absolute;} .map .popup_panel {min-width: 25rem;} .legend {border-radius: .5rem; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15); position: absolute; right: 2.5rem; bottom: 2.5rem; padding: 1rem; font-size: .75rem; min-width: 5.5rem;} .legend > p {border-bottom: 1px dashed #C4C6D0;} .legend li {display: flex; align-items: center; margin: .5rem 0;} .legend li:last-child {margin-bottom: 0;} .legend li i {margin-right: .5rem;} .gis .total_count {margin-top: 2rem;} .gis .total_count + div {margin-bottom: 1rem;} .card_list {border: solid #C4C6D0; border-width: 1px 0;} .card_list > li:not(:last-child) {border-bottom: 1px solid #C4C6D0;} .card_list li > div {min-height: 6.25rem; display: flex; flex-direction: column; padding: 1rem .5rem;} .card_list > li a {font-size: 1.125rem; color: #0265DC; margin-bottom: .5rem;} .card_list > li p {display: flex; align-items: flex-start;} .card_list > li p::before {content: ''; width: 1rem; height: 1rem; background: url(../img/icons.png); background-position: -23rem -3.5rem; margin-right: .25rem; margin-top: .125rem; flex-shrink: 0;} .card_list + .pagination {margin-top: 1rem;} .type0 span, .type3 span {animation: blinker 0.8s linear infinite;} @keyframes blinker { 50% { opacity: 0; } } /* jstree */ .jstree-default .jstree-open > .jstree-ocl {background-position: -131px -4px;} .jstree-default .jstree-closed > .jstree-ocl {background-position: -99px -4px;} /* .jstree-anchor[aria-level="1"][aria-expanded] i, .jstree-anchor[aria-level="2"][aria-expanded] i {width: 0;} */ .jstree-anchor[aria-level="2"][aria-expanded] + ul .jstree-open > .jstree-ocl {background-position: -132px -36px;} .jstree-anchor[aria-level="2"][aria-expanded] + ul .jstree-closed > .jstree-ocl {background-position: -100px -36px;} .jstree-anchor:not([aria-expanded]) {position: relative; left: -24px;} .jstree {border: 1px solid #E0E2EC; padding: 1rem; margin-top: -.75rem; min-width: 30rem; overflow-y: auto;} /* mobile */ .m nav, .m header:not(.main_header) h1 {display: none;} .m main {padding: .5rem 1rem; height: calc((var(--vh, 1vh) * 100) - 8rem); overflow: auto;} .m main [id^="scope-"]:not(.page_header) {height: 100%;} .m main [id^="scope-"]:not(.page_header) > div {margin-top: 0;} .m header {box-shadow: none; padding: .5rem 1rem;} .m header .title {display: flex;} .m header .chevron.left {display: flex; align-items: center;} .m header .chevron.left::after {padding: .25rem; margin-right: .5rem; border-width: 0 3px 3px 0;} .m header h2 {font-weight: 600;} .m .member_info .logout {margin-right: 2rem; background: #E0E2EC; border-radius: .75rem; font-size: .6875rem; color: #2D3038;} .m .member_info .logout svg.icon {fill: #2D3038; margin-right: 0;} .m .member_info .logout:hover, .m .member_info .logout.active {background: #2D3038; color: #fff;} .m .member_info .logout:hover svg.icon, .m .member_info .logout.active svg.icon {fill: #fff;} .m .member_info .member .member_pic {width: 2rem; height: 2rem; border-radius: 50%; overflow: hidden;} .m .member_info .member > a img {width: 100%;} .m .member_info .new::after {content: ""; top: auto; bottom: 0;} /* .m .contents .member_info .member {flex-direction: column; justify-content: center; position: relative;} */ .m .contents .member_info .member svg.icon {width: 1rem; height: 1rem;} .m .contents .member_info .member .member_pic {width: 3.5rem; height: 3.5rem; border: 1px solid #E0E2EC; margin-bottom: 0 ;} .m .contents .member_info .member.edit span {width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid #E0E2EC; background-color: #fff; display: flex; align-items: center; justify-content: center; padding: .25rem .25rem .375rem; position: absolute; right: -.5rem; bottom: 0;} .m .contents .member_info .member.edit.on span {right: 0; background: rgba(0,0,0,.5); width: 100%; height: 100%;} .m .contents .member_info .member.edit.on span svg.icon {fill: #fff;} .m .contents .member_info .member p:first-of-type {font-size: 1rem; margin: .625rem 0 .25rem;} .m h2 {font-size: 1.25rem; line-height: 1.5rem; letter-spacing: -.6px;} .m h3 {font-size: 1rem; line-height: 1.5rem; letter-spacing: -.6px; margin-bottom: .25rem;} .m h3 svg.icon {width: 1rem; height: 1rem;} .m .chevron::after {border-width: 0 2px 2px 0; padding: 3.25px; margin-bottom: .25rem; margin-left: .25rem;} /* mobile_main */ .m .main_header {align-items: start;} .m .main_header .logo {font-size: 1.25rem; letter-spacing: -1.4px; width: 100%; justify-content: center;} .m .main_header .logo a {flex-direction: column;} .m .main_header .logo .logo_img {margin: .75rem 0 .125rem;} .m .main_header .logo img {height: 1.25rem;} .m .main_contents h2 {line-height: 2rem; margin-bottom: 2rem;} .m .main_contents h2 span {display: block;} .m .main_contents h3 {font-size: 1.25rem;} .m .main_contents .main_menu {border-radius: .5rem; background: linear-gradient(125deg, #CCC2FF 0%, #62C6EA 100%);} .m .main_contents .main_menu li {display: flex; justify-content: center; margin: 1.5rem 0 1rem;} .m .main_contents .main_menu li:not(:last-child) {border-right: 1px dashed #fff;} .m .main_contents .main_menu li a {display: flex; flex-direction: column; justify-content: space-between; align-items: center; color: #fff; width: 100%;} .m .main_contents .main_menu li img {width: 5rem;} .m .main_contents .main_menu li span {border-radius: .25rem; font-size: 1rem; line-height: 1rem; padding: .5rem;} .m .main_contents .main_menu li a:hover span, .m .main_contents .main_menu li.on a span {background-color: #4C3CE5;} .m .info_board {background: #EFF6E6; border: 0;} .m .info_board .divide li {margin-top: 0;} .m .rangeInput {width: 100%;} /* .m .main_contents .card {border-radius: .5rem; position: relative; height: 6rem;} .m .main_contents .card::after {content: ""; display: block; position: absolute; right: 1rem; bottom: .5rem;} .m .main_contents .card a {display: flex; flex-direction: column; padding: .875rem 1rem .5rem; letter-spacing: -.6px; position: relative; z-index: 1; height: 100%; align-items: center; justify-content: space-evenly;} .m .main_contents .card:not(:last-child) {margin-right: 1rem;} .m .main_contents .card span {font-size: .6875rem; line-height: 1.0625rem; padding-top: .25rem; max-width: 7rem;} .m .main_contents .card .chevron::after {padding: 2.25px;} .m .main_contents .accident {background-color: #E0E2EC;} .m .main_contents .accident span{width: 3.5rem; height: 1.9375rem; background: url(../img/m_accident.png) no-repeat; background-size: cover;} .m .main_contents .risk {background-color: #DAF4FF;} .m .main_contents .risk span {width: 3.5rem; height: 1.9375rem; background: url(../img/m_risk.png) no-repeat; background-size: cover;} .m .main_contents .suggest {background-color: #EAF4DF;} .m .main_contents .suggest span {width: 3.5rem; height: 1.9375rem; background: url(../img/survey.png) no-repeat; background-size: cover;} .m .main_contents .notice {display: flex; align-items: center; border-radius: .5rem; background: rgba(101, 84, 192, 0.25); padding: .6875rem; letter-spacing: -.4px; line-height: 1rem; margin-top: .5rem;} .m .main_contents .notice.new::before {content: "N"; display: flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; color: #fff; font-size: .6875rem; line-height: .5625rem; border-radius: .25rem; background-color: #1A59C8; margin-right: .5rem;}*/ .m .main_contents .card {border-radius: .5rem; position: relative;} .m .main_contents .card::after {content: ""; display: block; position: absolute; right: 1rem; bottom: .5rem;} .m .main_contents .card a {display: flex; flex-direction: column; padding: .875rem 1rem .5rem; letter-spacing: -.6px; position: relative; z-index: 1; height: 100%;} .m .main_contents .card:not(:last-child) {margin-right: 1rem;} .m .main_contents .card span {font-size: .6875rem; line-height: 1.0625rem; padding-top: .25rem; max-width: 7rem;} .m .main_contents .card .chevron::after {padding: 2.25px;} .m .main_contents .accident {background-color: #E0E2EC;} .m .main_contents .accident::after {width: 4.25rem; height: 2.5rem; background: url(../img/m_accident.png) no-repeat; background-size: cover;} .m .main_contents .risk {flex: 0; background-color: #DAF4FF;} .m .main_contents .risk::after {width: 3.5rem; height: 1.9375rem; background: url(../img/m_risk.png) no-repeat; background-size: cover;} .m .main_contents .notice {display: flex; align-items: center; border-radius: .5rem; background: rgba(101, 84, 192, 0.25); padding: .6875rem; letter-spacing: -.4px; line-height: 1rem; margin-top: .5rem;} .m .main_contents .notice.new::before {content: "N"; display: flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; color: #fff; font-size: .6875rem; line-height: .5625rem; border-radius: .25rem; background-color: #1A59C8; margin-right: .5rem;} .m .btn_toggle_search {padding: 0 1rem;} .m .btn_toggle_search::before {margin-right: 0;} .m .search_area > div {padding: 1rem;} .m .search_area > div .btn {min-width: 5.5rem;} .m .search_container .row > * {width: 100%;} .m .contents:not(.popup .contents) {margin: 0 -1rem; padding: 1rem;} /* .m .contents > div:not(.btn-group) {margin-bottom: 1rem;} */ .m .contents.write {padding-top: 0;} .m table.table th, .m table.table td {padding: .375rem .5rem; line-height: 1.5rem;} .m .standards table th, .m .standards table td {font-size: .6875rem; line-height: .6875rem; padding: .5rem .25rem;} .m label > input[type="checkbox"] {margin: 0 .375rem;} .m .input_group > label {min-width: 2.5rem; justify-content: flex-end;} .m .img_area {min-height: auto; padding: 0;} .m .img_area li {width: 5.5rem; height: 3.625rem;} .m .img_area li:not(:last-child) {margin-right: 0;} .m .img_upload.no-img {border: 0; min-height: 7rem; background-size: 2.5rem; background-position: 50% calc(50% - 1rem);} .m .img_upload.no-img > label {top: calc(50% + 1rem);} .m .upload_file .btn {height: 1.875rem;} .m .upload_file .btn:first-child {min-width: 7.125rem;} .m .upload_file_wrap .icon_box {margin-left: .25rem;} .m .table_footer:not(.login .table_footer) {flex-direction: column; align-items: center;} .m .btn:not(.icon_box .btn) {padding: 0 .5rem;} .m .btn-group {width: 100%; margin-bottom: 0;} .m .btn-group:not(.search_area .btn-group) .btn {flex: 1;} .m .top_nav {display: flex; align-items: center; background-color: #EFF0FA; box-shadow: 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 1px 1px 0px rgba(9, 30, 66, 0.25); overflow-x: auto; min-height: 2.875rem; margin: -.5rem 0 0; padding-right: .5rem; z-index: 10;} .m .top_nav::after {content: ""; display: block; position: fixed; right: 0; width: .5em; height: 2.875rem; background-color: #EFF0FA; box-shadow: -7px 0 5px rgba(239, 240, 250, 1);} .m .top_nav li a {display: flex; padding: .875rem .75rem; width: max-content; line-height: .875rem;} .m .top_nav li a:hover,.m .top_nav li.on a {border-bottom: 4px solid #0265DC; color: #0265DC; font-weight: 600;} .m .top_nav + .search_area,.m .banner + .search_area {margin-top: 2rem;} /* banner */ .m .full_wrap {position: relative; left: -1rem; width: calc(100% + 2rem);} .m .banner {line-height: 1.5rem; letter-spacing: -.6px; display: block; font-size: 1rem; color: #fff; background: linear-gradient(90deg, rgba(202, 92, 230, 0.99) 0%, #007AFF 100%); padding: 1.0625rem 1.5rem 1.4375rem;} .m .banner::after {content: ""; display: block; position:absolute; bottom: 0; background-size: cover;} .m .suggestion::after {content: ""; width: 4.5rem; height: 5.25rem; background: url(../img/suggestion.png) no-repeat; position:absolute; right: 1rem; background-size: cover;} .m .notice.banner::after {content: ""; width: 122px; height: 73px; background: url(../img/banner_notice.png) no-repeat; position:absolute; right: 0; background-size: cover;} .m .health {background: linear-gradient(90deg, #F0EFF0 0%, #E4D6FA 100%); margin-top: 2.5rem; padding: 1rem 1rem .75rem 7rem; font-size: .875rem; line-height: .875rem; color: #403294;} .m .health p:first-child {font-size: 1.25rem; line-height: 1.5rem; margin-bottom: .5rem; color: initial;} .m .health::after {content: ""; width: 5.25rem; height: 6rem; background: url(../img/health.png) no-repeat; position:absolute; left: 1rem;} .m .suggest2 {background: linear-gradient(270deg, #F0EFF0 0%, #E4D6FA 100%); margin-top: 2.5rem; padding: .75rem 7rem 1rem 1rem; font-size: .875rem; line-height: .875rem; color: #403294;} .m .suggest2 p:first-child {font-size: 1.25rem; line-height: 1.5rem; margin-bottom: .5rem; color: initial;} .m .suggest2::after {content: ""; width: 5.25rem; height: 6rem; background: url(../img/survey.png) no-repeat; background-size: cover; position:absolute; right: 1rem;} .m .full_wrap.tab {background: linear-gradient(90deg, rgba(202, 92, 230, 0.99) 0%, #007AFF 100%); border-bottom: 0; padding-left: 4.5rem; overflow: initial;} .m .full_wrap.tab li button {font-size: .8125rem; height: 2.5rem; background: none; color: #fff; position: relative;} .m .full_wrap.tab li:not(.active):hover button {text-decoration: underline; text-underline-offset: 3px;} .m .full_wrap.tab li.active button {font-size: 1rem; font-weight: 600; padding-left: .25rem;} .m .full_wrap.tab li.active button::after {content: ""; width: 12px; height: 9px; background: url(../img/tab_arrow.png) no-repeat top; position: absolute; top: 50%; right: 0; transform: translateY(-50%);} .m .full_wrap.tab + .tab_content {margin-top: 1rem;} .m .weather_info {min-height: 10rem;} .m .pagination {width: 100%;} .m .pagination li {margin: 0 .25rem;} .m .pagination li:first-child {margin-right: auto;} .m .pagination li:last-child {margin-left: auto;} .m .bottom_nav {position: fixed; bottom: 0; left: 0; right: 0; display: block; box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.05), 0px -1px 0px 0px rgba(0, 0, 0, 0.04); border-radius: 1rem 1rem 0 0; background: #fff; z-index: 10;} .m .bottom_nav ul {display: flex; margin: 0 .5rem;} .m .bottom_nav ul li {flex: 1; position: relative;} .m .bottom_nav ul li a {display: flex; flex-direction: column; align-items: center; padding: 1rem 0 1.5rem;} .m .bottom_nav ul li svg.icon {fill: #C4C6D0;} .m .bottom_nav ul li span {font-size: .6875rem; line-height: 100%; letter-spacing: -.4px; color: #C4C6D0; padding-top: .5rem;} .m .bottom_nav ul li a:hover svg.icon, .m .bottom_nav ul li.on svg.icon {fill: #2D3038;} .m .bottom_nav ul li a:hover span, .m .bottom_nav ul li.on span {color: #000;} .m .bottom_nav .new::after {width: .25rem; height: .25rem; right: .75rem; top: .875rem; border: 0;} .m .paragraph, .m .paragraph li, .m .paragraph h3 {font-size: .8125rem; line-height: 1.125rem; letter-spacing: -.6px;} .m .paragraph h2 {margin-bottom: .5rem;} .m .paragraph table.table th, .m .paragraph table.table td {line-height: 1.125rem;} /* login */ /* .m .login {height: calc((var(--vh, 1vh) * 100));} */ .m .logo_big {align-items: center; margin-bottom: 5.0625rem;} .m .logo_big .logo_img {margin-bottom: 1.5rem;} .m .logo span {margin-bottom : .25rem;} .m .login .btn.btn-full {margin-top: 3.1875rem;} .m .login .table_footer {margin-top: .5rem;} .m .login .table_footer .btn-link {font-weight: 600; font-size: .875rem;} /* join */ .m .join {background-image: none; display: block;} .m .join .logo {flex-direction: column; align-items: flex-start; font-size: 1.125rem;} .m .join h2 {font-size: 1.25rem;} .m .join .bar_step {top: 1rem; right: 1rem;} .m .join > div {padding: 1rem;} .m .join .contents {height: calc((var(--vh, 1vh) * 100) - 11rem);} .m .join li em {line-height: 1.25rem; margin-left: 1rem; letter-spacing: -.6px;} .m .join .btn.btn-large {width: 100%;} .m .join .wrap.contents .btn-large {position: absolute; bottom: 1rem; width: calc(100% - 2rem);} .m .join .wrap.contents img {width: 16.25rem;} /* popup */ .m .popup_panel {min-width: 20.5rem; width: calc(100vw - 2rem); background: #fff; padding: 1rem; border-radius: .5rem; box-shadow: 0px 0px 1px 0px rgba(9, 30, 66, 0.31), 0px 18px 28px 0px rgba(9, 30, 66, 0.15);} .m .popup_header {color: #2D3038; padding: 0;} .m .popup_header svg {fill: #2D3038;} .m .popup h4 {font-size: 1.125rem; font-weight: 400; letter-spacing: -1px;} .m .popup .contents {background: #fff; padding: .5rem 0 0;} .m .popup table.table th, .m .popup table.table td {padding: .5rem;} .m .bottom_popup {top: 100%; transform: translate(-50%, -100%);} .m .bottom_popup .popup_panel {width: 100vw; min-height: 23rem; border-radius: 1rem 1rem 0 0; padding: 2.5rem 1.5rem;} .m .bottom_popup .btn-group {margin-top: 2.625rem;} .essential::after { content: '*'; color: #ff0000; }