@charset "utf-8";
/* 공통 */
:root {
    --point-color: #FFDD6D; --point-color-border: #F1CF60; --main-color: #29475E;
    --point-color-hover: #ffd343; --point-color-border-hover: #e6b925;
    --white-color: #fff; --border-color: #E8E8E8;
    --table-hover-color: #f4fafd;
    --red-btn: #f96565; --red-btn-text: rgba(255,255,255,0.9); --red-btn-hover: #e84545;
    --gray-btn: #eaeaea; --gray-btn-hover: #d2d2d2; --gray-btn-border: #e0e0e0; --gray-btn-border-hover: #bdbdbd;
    --gray-color: #eee;
    --black-bg-opacity: rgba(0,0,0,0.84);
    --notice-new: #ff3e2f;

    /* background-color */
    --bg-color: rgb(226,231,236,0.25);

    /* font-color */
    --font-color-010: #111; --font-color-020: #333; --font-color-030: #555; --font-color-040: #777; --font-color-050: #999;

    /* font-weight */
    /*--title-text-weight: 500 !important; --content-text-weight: 400; --placeholder-text-weight: 300; --font-weight-bold: bold;*/
    --thin: 100; --light: 300; --regular: 400; --medium: 500 !important; --bold: 700; --black: 900;

    /* animation */
    --transition: all 0.3s ease 0s;

    /* mobile */
    --max-width: 1100px;

    /* red, blue color */
    --red-color: #EC2323; --blue-color: #2477b7;
}

/* 초기화 */
*, h1, h2, h3, h4, h5, h6, p, span, div, dl, ol, ul, li {margin: 0; padding: 0; list-style: none;}
body {font-family: 'Noto Sans KR', sans-serif; color: var(--font-color-030); font-weight: var(--regular);}
img {border: 0;}
a, a:hover, a:active {color: var(--font-color-020); text-decoration: none; transition: var(--transition);}
button, button:focus, button:active{border: 0; outline: none; cursor:pointer}
input, label, textarea, select {vertical-align:middle;}
input[type="submit"]{cursor:pointer}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
hr {display:none}
input:disabled {background: var(--white-color);}

/* width */
.width-inherit {width: inherit !important;}

/* height */
.height-inherit {height: inherit;}
.h-100 {height: 100%;}

/* 스크롤 막기 */
.scroll-hidden {height: 100%; overflow-y: hidden;}

/* 버튼 */
.btn {padding: 0.313em 0.8em; box-sizing: content-box; font-size: 1rem;}
.btn-wrap .btn {margin-left: 0.375em;}
.btn-wrap .btn:first-child {margin-left: 0;}
input.title-input {height: auto; padding: 0.313em 0.8em; box-sizing: content-box; font-size: 1.125rem;}

/* 입력상자 */
input, select, textarea, .form-control {height: calc(2.25rem + 0.125em); padding: 0 0.25em ; border: 1px solid #BFBFBF; border-radius: 0;font-size: 1.125rem;font-weight: var(--regular);color: var(--font-color-040);}
input::placeholder, select::placeholder, textarea::placeholder {font-size: 1.125rem;font-weight: var(--light); color: var(--font-color-050);}
.select-wrap, select.form-control {width: auto !important;}
textarea {line-height: 1.5; border-radius: 0;}
.form-control:disabled, .form-control[readonly] {background: var(--white-color);}
.searchbar input[type=text] {width: 9rem;}

#main .disabled, .checklist-wrap.popup-container .disabled {background: rgb(245 245 245); pointer-events: none;}

/* text */
.text-nowrap {white-space: nowrap;}
.text-wrap {white-space: normal;}

.pointer-events-none {pointer-events: none;}

/* 파일업로드 */
.upload-wrap .file-box {margin-right: 1.250em;}
.file-box .file-btn {width: auto; padding: 0.563em 1.5em; font-size: 1rem; font-weight: var(--medium); color: var(--font-color-040); background: #F3F3F3; text-align: center; cursor: pointer; position: absolute; top: 0.25em; left: 0.25em; box-sizing: content-box;}
.file-box .upload-name {height: calc(2.625rem + 8px);text-indent: 6em; padding: 0.375em 0.75em;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}

/* 체크박스 */
label.check-input {background: #fff; margin-right: 0.313em;}
label.check-input i {font-size: 0.9375rem; color: #fff;}
input.none-input + label.check-input {width: 1.125rem; height: 1.125rem; border: 1px solid #BFBFBF; cursor: pointer; margin-bottom: 0; margin-right: 0;}
input[type=checkbox]:checked + label i {color: var(--font-color-030);}

/* searchbar */
.searchbar {display: flex; height: auto; font-size: 1.125rem;}
.searchbar div {width: auto; margin-right: 0.250em;}
.date-wrap input:first-child {margin: 0 0.25em 0 1em;}
.date-wrap input:last-child {margin: 0 1em 0 0.25em;}
.searchbar div.date-wrap {width: auto; margin: 0 0.750em;}
.searchbar .date-wrap .date {font-size: 1rem;}
.searchbar .date-wrap input {margin: 0;}
.searchbar .date-wrap span {margin: 0 0.25em;}
.searchbar .form-check {padding-left: 0;}
.searchbar button.btn.search-btn {margin-left: 0;}

.now-list-wrap .searchbar .form-group {margin-bottom: 0;}
.now-list-wrap .searchbar li:first-child .form-check input {height: auto; margin-top: 0;}
.now-list-wrap .searchbar li:first-child div:first-child {margin-right: 1em;}
.now-list-wrap .searchbar li:first-child div:last-child {margin-right: 0;}

.now-list-wrap .searchbar li:last-child div {margin-right: 1em;}

/* 색상 및 버튼 */
.main-bg {background: var(--main-color);}
.yellow-btn {background: var(--point-color); border: 1px solid var(--point-color-border); color: var(--font-color-030);}
.yellow-btn:hover, .yellow-btn:active  {background: var(--point-color-hover); border: 1px solid var(--point-color-border-hover); font-weight: var(--medium);}
.gray-btn {background: var(--gray-btn); border: 1px solid var(--gray-btn-border); color: var(--font-color-020);}
.gray-btn:hover, .gray-btn:active {background: var(--gray-btn-hover); border: 1px solid var(--gray-btn-border-hover); font-weight: var(--medium);}
.red-btn{background: var(--red-btn); color: var(--red-btn-text);}
.red-btn:hover, .red-btn:active {background: var(--red-btn-hover); font-weight: var(--medium);}
.login-bg {background: linear-gradient(140deg, #47657D, #29475E);}
.title-border {border-bottom: 1px solid #E9E9E9;}
.search-btn {padding: 0.188em 0.3em;}
.content-text-color {color: var(--font-color-040);}
.red-color {color: var(--red-color);}
.blue-color {color: var(--blue-color);}
.title {color: var(--font-color-020); font-size: 1.125rem; font-weight: var(--medium);}

.warning {box-sizing: border-box; font-size: 1rem; font-weight: var(--regular); line-height: 1.8; color: var(--font-color-020);}
.warning strong, .warning b, .red-color {font-weight: var(--bold);}

/* 여백설정 */
.m-0 {margin: 0;}
.mt-0 {margin-top: 0;}
.mb-0 {margin-bottom: 0;}
.mr-0 {margin-right: 0;}
.ml-0 {margin-left: 0;}
.pd-0 {padding: 0;}

/* 모서리 */
.rounded-sm {border-radius: 0.17rem;}

/* 투명도 */
.op-1 {opacity: 0.1;}
.op-6 {opacity: 0.6;}
.op-9 {opacity: 0.9;}

/* 자간 */
.date {letter-spacing: 0;}

/* hover, focus 효과 */
*:focus {outline:none;}
.table-wrap table tbody tr {transition: var(--transition);}
.table-wrap table tbody tr:hover {background-color: var(--table-hover-color); transition: var(--transition);}

/* ecg 애니메이션 */
@-moz-keyframes textanimtion {
    from {opacity: 1;}
    25% {opacity: 0.1;}
    50% {opacity: 1;}
    75% {opacity: 0.1;}
    to {opacity: 1;}
}
@-webkit-keyframes textanimtion  {
    from {opacity: 1;}
    25% {opacity: 0.1;}
    50% {opacity: 1;}
    75% {opacity: 0.1;}
    to {opacity: 1;}
}
@keyframes textanimtion {
    from {opacity: 1;}
    25% {opacity: 0.1;}
    50% {opacity: 1;}
    75% {opacity: 0.1;}
    to {opacity: 1;}
}

/* header */
header {height: 64px; margin: 0; box-shadow: 0 3px 13px 0px rgba(60,60,60,0.1); z-index: 999; background: #fff;}
header > ul {transition: var(--transition);}
header > ul.slide-active {width: 100%; margin-left: 0; transition: var(--transition);}
header .header-container {border-bottom: 1px solid #E9E9E9; padding: 0 1.5rem;}

header .logo-box {position: absolute; left: 50%; transform: translateX(-50%);}
header .logo-box img {max-width: 116px;}

header .header-container .right-menu div {float: left; margin-left: 1.5em; font-size: 12px;transition: var(--transition);}
header .header-container .right-menu div a {color: var(--font-color-050);}
header .header-container .right-menu i {font-size: 16px; margin-right: 0.125em; color:var(--font-color-050);}
header .header-container .right-menu div:hover a, header .header-container .right-menu div:hover i {color:var(--main-color); font-weight: var(--medium);transition: var(--transition);}

/* side-btn */
.side-btn-wrap {width: 40px; height: 40px;}
.side-btn {width:100%; height: 100%; background: transparent; border: 0;transition: var(--transition); opacity: 1;}
.side-btn:focus {outline: none;}

.side-btn ul {width: 22px; height: 16px; position: relative;}
.side-btn li {position: absolute; width: 100%; height: 2px; border-radius: 1px; background: #555; display: block; float: left;}
.side-btn li:first-child {top: 0; transform: translateY(0) rotate(0); transition: var(--transition);}
.side-btn li:nth-child(2) {opacity: 1; top: 50%;transform: translateY(-50%); transition: var(--transition);}
.side-btn li:last-child {bottom: 0; transform: translateY(0) rotate(0); transition: var(--transition);}

.btn-active li:first-child {top: 50%; transform: translateY(-50%) rotate(45deg);}
.btn-active li:nth-child(2) {opacity: 0;}
.btn-active li:last-child {bottom: 50%; transform: translateY(50%) rotate(-45deg);}

/* sidebar */
#sidebarCollapse img {max-width: 40px; height: auto;}
#sidebar {width: 270px; box-sizing: border-box; position: fixed; top: 64px; z-index: 99; padding: 20px 0 20px; box-sizing: border-box; overflow-y: auto;}
.sidebar .logo {width: 28%; margin: 0 auto;}
.sidebar .logo img {max-width: 100%;}

.sidebar-sticky, .sidebar-sticky .nav, .sidebar-sticky .menu-wrap {width: 100%;}
.sidebar-sticky .menu-wrap {margin-bottom: 0.2em;}
.sidebar-sticky li.menu-wrap:first-child {padding-top: 0.5em;}
.sidebar-sticky {overflow-y: scroll; padding: 0 1.875em; margin-top: 0;}

.mypage-wrap {padding: 0.5em 0 0; border-top: 1px solid rgba(255,255,255,0.3);}
.mypage, .mypage a {letter-spacing: -1.4px; padding: 0.6rem 1rem; border-radius: 0.3rem; box-sizing: border-box; position: relative; font-size: 18px; font-weight: var(--regular); color: var(--white-color);}
.mypage-wrap ul {margin-bottom: 1em;}

.sidebar li .arrow-box {position: absolute; top: 50%; transform: translateY(-50%); right: 1em; width: 18px; height: 18px;}
.sidebar li .arrow-box img {width: 100%; height: auto;float: left; transform: rotate(180deg); transition: var(--transition);}
.sidebar li.nav-item a {letter-spacing: -1.4px; padding: 0.6rem 1rem; border-radius: 0.3rem; box-sizing: border-box; position: relative; font-size: 18px; font-weight: var(--regular); color: var(--white-color);}

.sidebar .mypage ul, .sidebar li .bottom-menu-wrap {padding: 0 0 0 1.875rem; box-sizing: border-box;}
.sidebar li ul, .sidebar li ul li, .sidebar li ul li a {width: 100%; float: left;}
.sidebar-sticky li.menu-wrap:last-child {padding-bottom: 0.5em;}
.sidebar li a {transition: var(--transition);}
.sidebar li a:hover {background: rgba(255, 255, 255, 0.1); color: var(--point-color); transition: var(--transition);}
.sidebar .mypage ul, .sidebar li .bottom-menu-wrap {margin-top: 0.75rem; position: relative;}
.sidebar li .bottom-menu-wrap > li {margin-bottom: 0.5rem;}
.sidebar li .bottom-menu-wrap > li:last-child {margin-bottom: 0;}
.sidebar li li::before {background: rgba(255, 255, 255, 0.3); content: ''; height: 100%; opacity: 1; width: 3px; position: absolute; left: 1.25rem; top: 0; border-radius: 0.5em;}

/* 소메뉴 */
.sidebar .mypage .bottom-menu-wrap a, .sidebar li.nav-item li a {letter-spacing: -0.8px; height: 38px; line-height: 38px; padding: 0 1.063em; box-sizing: border-box; font-size: 16px; font-weight: var(--light); opacity: 0.9;}

/* 메뉴 활성화시 */
.sidebar li.menu-active {padding: 1rem 0;}
.sidebar .mypage-wrap .menu-active , .sidebar li.menu-active a.top-menu, .sidebar li.menu-active li.bottom-menu-active a {font-weight: var(--medium); background: rgba(255, 255, 255, 0.1); color: var(--point-color); transition: var(--transition);}
.sidebar .mypage-wrap .menu-active .arrow-box img, .sidebar li.menu-active .arrow-box img {transform: rotate(0deg); transition: var(--transition);}

/* 메뉴 아이콘 */
.mypage a i {margin-right: 0.6em;}
#sidebar li.nav-item a.top-menu::before {content: "\f007"; display: inline-block; margin-right: 0.6em; font: normal normal normal 14px/1 FontAwesome; font-size: 1em; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
#sidebar li.nav-item:nth-of-type(2) a.top-menu::before {content: "\f013";}
#sidebar li.nav-item:nth-of-type(3) a.top-menu::before {content: "\f251";}
#sidebar li.nav-item:nth-of-type(4) a.top-menu::before {content: "\f253";}
#sidebar li.nav-item:last-of-type a.top-menu::before {content: "\f15c";}

/* 이미지 박스 */
.padding-active {padding: 0 1.685em; transition: all 0.3s linear 0s;}

/* container */
.container-full {width: 100%;}
.container-fluid {padding: 0;}

/* main-container */
.main-container {margin-top: 64px; padding-top: 3.125em; background: var(--bg-color); padding-bottom: 6.25em;}
.main-container .container {max-width: 100%; padding: 0 3em;}
#container_title span {letter-spacing: -0.125rem;}
#main {width: 100%; transition: var(--transition);}
#main.slide-active {width: calc(100% - 270px); margin-left: 270px; transition: var(--transition);}

/* card-wrap */
.card-box {margin-bottom: 3.750em; padding: 1.2rem 2rem; border-radius: 0.5em; background: #fff; box-shadow: 0 0.46875rem 2.1875rem rgba(4,9,20,0.03), 0 0.9375rem 1.40625rem rgba(4,9,20,0.03), 0 0.25rem 0.53125rem rgba(4,9,20,0.05), 0 0.125rem 0.1875rem rgba(4,9,20,0.03);}
.card-main-title {margin-bottom: 3.750em; padding: 1.5em 2em; border-radius: 0.5em; background: #fff; box-shadow: 0 0.46875rem 2.1875rem rgba(4,9,20,0.03), 0 0.9375rem 1.40625rem rgba(4,9,20,0.03), 0 0.25rem 0.53125rem rgba(4,9,20,0.05), 0 0.125rem 0.1875rem rgba(4,9,20,0.03);}
.card-main-title span {font-size: 1.25rem; font-weight: var(--bold); color: var(--font-color-020);}

.card-container {margin-bottom: 3.750em; box-sizing: border-box; border-radius: 0.5em; background: #fff; box-shadow: 0 0.46875rem 2.1875rem rgba(4,9,20,0.03), 0 0.9375rem 1.40625rem rgba(4,9,20,0.03), 0 0.25rem 0.53125rem rgba(4,9,20,0.05), 0 0.125rem 0.1875rem rgba(4,9,20,0.03);}
.card-container:last-child {margin-bottom: 0;}
.card-title {padding: 0.563em 2rem; margin-bottom: 0.063em; border-bottom-left-radius: 0; border-bottom-right-radius: 0; align-items: center; border-bottom: 1px solid #dbdcdc;}
.searchbar {flex-wrap: wrap;}
.card-content {padding: 1.6rem 2rem; border-top-left-radius: 0; border-top-right-radius: 0;}

/* table-wrap */
.border-0 {border: 0;}
.table-wrap {font-size: 1.125rem;}
.table-wrap table {width: 100%; border-collapse: collapse; text-align: center; vertical-align: middle; font-weight: var(--regular); table-layout: fixed; word-break: break-all;}
.table-wrap table thead th {color: var(--font-color-020); font-weight: var(--medium) !important; white-space: nowrap;}
.table-wrap th, .table-wrap td {padding: 0.75em; vertical-align: middle;}
.table-wrap table .a-btn {display: inline-block; position: relative;}
.table-wrap table a {color: var(--font-color-020);  transition: var(--transition);}
.table-wrap table a::after {content: ""; position: absolute; bottom: -5px; left: 50%; width: 0%; height: 2px; background: rgba(0, 0, 0, 0.07); transition: var(--transition);}
.table-wrap table .a-btn:hover a {color: #29475e; font-weight: var(--medium); transition: var(--transition);}
.table-wrap table .a-btn:hover a::after {width: 100%; left: 0; background: #668296; transition: var(--transition);}
.table-wrap tbody th, .table-wrap tbody td {border-top: 1px solid #e8e8e8; border-bottom: 0; text-align: center; font-weight: var(--regular);}
.table-wrap input {height: calc(2.25rem + 2px); padding: 0.375em 0.75em; line-height: 1.5;}

.table-wrap .btn-wrap .btn {float: left; margin-left: 0.375em;}
.table-wrap .sub-table tbody th, .table-wrap .sub-table tbody td {border-top: 0;}

.table-wrap table tbody tr {transition: var(--transition);}
.table-wrap table tbody tr:hover {background-color: var(--table-hover-color); transition: var(--transition);}

/* 참관페이지 탭 */
.view-tab-container {height: 0;}
.view-tab-container.show-active {height: 100vh; top: 0;}
.view-tab-container > .tab-content {top: 50%; transform: translateY(-50%);}

/* 현재·과거운영 참관 페이지 */
.practice-name i {color: var(--black); margin-right: 4px;}
.practice-name {margin-left: 12px; font-size: 1.063rem; font-weight: var(--regular); color: var(--font-color-020);}

/* 참관페이지 체크리스트 코멘트 저장 */
.view-list-wrap .sub-table tbody td {padding-top: 0;}
.view-list-wrap .comment-wrap > td, .view-list-wrap .table-container tr th, .view-list-wrap .table-container tr td {position: relative; border-top: 0;}
.view-list-wrap .comment-wrap .sub-table tr td, .view-list-wrap .js-tbody-checklist > tr > td {padding: 0;}
.view-list-wrap .comment-wrap .sub-table td img {width: 24px; height: 24px; max-width: 24px; vertical-align: top;}

.view-list-wrap .comment-wrap input {position: relative; z-index: 1;}
.view-list-wrap .comment-wrap .comment-save-icon {display: none; position: absolute; z-index: 2; top: 50%; right: 10px; transform: translateY(-50%); margin-top: -2px; color: var(--blue-color);}

.view-list-wrap .comment-wrap input.comment-save + .comment-save-icon {display: inline-block;}
.view-list-wrap input.comment-save {border: 1px solid var(--blue-color) !important;}

.view-list-wrap.checklist-view-wrap div.table-wrap {padding-bottom: 24px;}
.view-list-wrap .view-list-right li.table-wrap {padding-bottom: 46px;}

/* loading 화면 (검사 일괄 업로드, 개별 및 단체 실습 생성) */
.loading {width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 1031; background: var(--black-bg-opacity); transition: all 0.3s ease 0s;}
.loading > div {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.loading-box {display: inline-block; width: 6.25rem; height: 6.25rem; position: relative;}
.loading-box span {display: inline-block; width: 100%; height: 100%; position: relative; border: 4px solid rgba(255, 255, 255, 0.4); border-radius: 50%; border-top-color: #fff; -moz-animation: 1s cubic-bezier(.86,.21,.59,.85) infinite loading; -webkit-animation: 1s cubic-bezier(.86,.21,.59,.85) infinite loading; animation: 1s cubic-bezier(.86,.21,.59,.85) infinite loading;}
.loading-box::after {content: "loading..."; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: 2px; font-size: 1rem;}
.loading p.warning {margin-top: 1em; color: rgba(255, 255, 255, 0.9); font-weight: 300;}

@-moz-keyframes loading {
    to {transform: rotate(360deg);}
}
@-webkit-keyframes loading {
    to { -webkit-transform: rotate(360deg);}
}
@keyframes loading {
    to {transform: rotate(360deg);}
}

/* footer */
footer {width: 100%; margin-left: 0; padding: 25px 0; background: #F3F3F3; transition: var(--transition);}
footer .container {max-width: 100%; padding: 0 3rem;}
footer.slide-active {width: calc(100% - 270px); margin-left: 270px;}
footer .left {float: left;}
footer ul li {float: left;}
footer ul li a:hover {color: var(--font-color-050);}
footer ul li a {pointer-events: none;}
footer ul:first-child li a {color: var(--font-color-020);}
footer ul:first-child li a:hover {color: var(--font-color-020); font-weight: var(--medium);}
footer ul li:nth-child(2n) {color: var(--font-color-030); margin: 0 20px;}
footer ul li:nth-child(2n) {color: var(--font-color-030); margin: 0 20px;}
footer span {float: left;}
footer .right {float: right; width: 8.75rem;}
footer .right img {max-width: 100%; height: auto;}

/* 팝업창 */
.popup-container .pg_current, .popup-container .pg_page:hover {background: #d2d2d2; color: var(--font-color-030);}
.popup-container .pg_start:hover {background: #d2d2d2; background-image: url('../img/page-arrow01.png'); background-repeat: no-repeat; background-position: 50%; background-size: 54%; transform: rotate(180deg); border: none;}
.popup-container .pg_next:hover {background: #d2d2d2; background-image: url('../img/page-arrow01.png'); background-repeat: no-repeat; background-position: 50%; background-size: 54%; transform: rotate(180deg); border: none;}
.popup-container .pg_prev:hover {background: #d2d2d2; background-image: url('../img/page-arrow02.png'); background-repeat: no-repeat; background-position: 50%; background-size: 54%; transform: rotate(180deg); border: none;}
.popup-container .pg_end:hover {background: #d2d2d2; background-image: url('../img/page-arrow02.png'); background-repeat: no-repeat; background-position: 50%; background-size: 54%; border: none;}
.popup-container .pg_page {color: var(--font-color-040);}

.popup-container {background: rgb(226,231,236,0.6);}
.popup-title, .popup-content {padding: 0.5em 1em; border-radius: 0.5em; background: #fff; box-shadow: 0 0.46875rem 2.1875rem rgba(4,9,20,0.03), 0 0.9375rem 1.40625rem rgba(4,9,20,0.03), 0 0.25rem 0.53125rem rgba(4,9,20,0.05), 0 0.125rem 0.1875rem rgba(4,9,20,0.03); margin-bottom: 1em;}
.popup-container .table-wrap {padding: 0; border: 0;}

.popup-container {padding: 1.5em 1em !important;}
.popup-container input, .popup-container select, .popup-container textarea, .popup-container .form-control, .popup-container label, .popup-container btn {font-size: 1rem !important;}
.popup-title { font-size: 1.25rem; font-weight: var(--medium); color: var(--font-color-020); margin-bottom: 1em;}
.popup-title h4 {font-size: inherit; font-weight: var(--medium);}
.popup-title .info {padding: 0.688em 0.813em; background: #EAEDF3; font-weight: var(--regular); color: var(--font-color-020); border-radius: 0.25em;}
.popup-title .info li {float: left; font-size: 0.8em;}
.popup-title .info li:nth-of-type(2n) {float: left; margin: 0 0.625em; opacity: 0.2;}

.popup-content .table-wrap {border: 0; box-sizing: border-box; padding: 0; overflow: scroll; font-size: 1rem; border-radius: 0.5em; overflow: auto;}
.popup-content .table-wrap thead {color: var(--font-color-020);}
.popup-content .table-wrap tbody th {font-weight: var(--regular);}

.popup-content-box {background: transparent; box-shadow: none; padding: 0;}
.popup-content-box .table-title {padding: 0.5em 1em; margin-bottom: 1px; align-items: center; border-bottom: 1px solid #dbdcdc; background: #fff; border-radius: 0.5em; border-bottom-left-radius: 0; border-bottom-right-radius: 0; font-size: 1.25rem; font-weight: var(--medium); color: var(--font-color-020); }
.popup-content-box .table-content {box-sizing: border-box; border-radius: 0.5em; background: #fff; box-shadow: 0 0.46875rem 2.1875rem rgba(4,9,20,0.03), 0 0.9375rem 1.40625rem rgba(4,9,20,0.03), 0 0.25rem 0.53125rem rgba(4,9,20,0.05), 0 0.125rem 0.1875rem rgba(4,9,20,0.03); padding: 0.5em 1em; border-top-left-radius: 0; border-top-right-radius: 0;}