@charset "utf-8";
@import url("/Outlink/Join/css/bootstrap.min.css");
@import url("/Outlink/Join/css/default.css");
@import url("/Outlink/Join/fonts/bootstrap-icons/bootstrap-icons.min.css");
@import url("/Outlink/Join/fonts/notosans/notosans.css");
@import url("/Outlink/Join/fonts/jalnangothic/jalnangothic.css");

:root {
    --font-icon: "bootstrap-icons";
    --font-type01: "Noto Sans KR";
    --font-type02: "YeogiOttaeJalnanGothic";

    --form-color01: #DEE2E6;
    --form-color02: #F5F8FF;
    --form-color03: #F8F8FB;

    --chart01-bg01: #6BD1FE;
    --chart01-bg02: #47A9FA;
    --chart01-bg03: #1372D3;
    --chart01-bg04: #63E3C2;
    --chart01-bg05: #13CCBE;
    --chart01-bg06: #00B899;
    --chart02-bg01: #C478CB;
    --chart02-bg02: #FDAAE4;
    --chart02-bg03: #F77DC4;
    --chart02-bg04: #F86C6B;
    --chart02-bg05: #FFB771;
    --chart02-bg06: #FDDA6D;

    --bs-secondary: #697192;
    --bs-secondary-rgb: 105, 113, 146;
    --bs-secondary-hover: #585E79;
    --bs-danger: #DC3545;
    --bs-danger-rgb: 225,83,97;
    --bs-danger-hover: #BB2D3B;

    --radius-sm: 6px;
    --radius: 12px;
    --oval: 100px;
    --circle: 50%;
    --bg-color01: #f5faff;
    --bg-color02: #f4f5f6;
    --shadow: 3px 6px 10px rgba(0, 0, 0, 0.05);
}

/*****************************************************
common
*****************************************************/
html, body {font-family: var(--font-type01), 'Noto Sans KR', 'Nanum Gothic', sans-serif; min-width: 360px; font-size: 15px; letter-spacing: -0.5px; line-height: 1.4; color: #333; word-break: keep-all;}
body.body-fixed {overflow: hidden;}
caption {position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}
ul, ol {list-style: none; padding-left: 0; text-align: left;}
b, strong {font-weight: 600;}
a {color: inherit; text-decoration: none;}
a:hover {color: var(--main-color01);} 
a:hover, a:focus {text-decoration: none; transition: .3s;}
a:focus, button:focus, .btn:focus, .nav-link:focus, .page-link:focus, [class*="form-"]:focus {outline: none;}
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .page-link:focus-visible, [class*="form-"]:focus-visible {outline-offset: -3px; outline: 3px dashed var(--point-color01);}
img {max-width: 100%;}
::-webkit-scrollbar {width: 7px; height: 7px;}
::-webkit-scrollbar-track {background-color: var(--bs-gray-200); border-radius: 50px;}
::-webkit-scrollbar-thumb {background-color: var(--bs-gray-500); border-radius: 50px;}
::-webkit-scrollbar-button {display: none;}
.line-gap {margin: 32px 0; border-top: 1px dashed var(--bs-gray-400); opacity: 1;}
#UpPnl > *:last-child, #UpdatePanel1 > *:last-child, .sub-content > *:last-child {margin-bottom: 0;}
@media (min-width: 576px) {
    html, body {font-size: 16px;}
}

/* mw */
.mw-500 {min-width: 500px;}
.mw-600 {min-width: 600px;}
.mw-700 {min-width: 700px;}
.mw-800 {min-width: 800px;}
.mw-900 {min-width: 900px;}
.mw-1000 {min-width: 1000px;}
.mw-1100 {min-width: 1100px;}
.mw-1200 {min-width: 1200px;}
.mw-1300 {min-width: 1300px;}
.mw-1400 {min-width: 1400px;}
.mw-1500 {min-width: 1500px;}

.spacing-box {display: flex; flex-wrap: wrap; gap: 0 4px; width: 100%;}

/* color */
.text-primary {color: var(--main-color01) !important;}
.text-secondary {color: var(--bs-secondary) !important;}
.text-danger {color: var(--bs-danger) !important;}

/* btn */
.btn {margin: 2px 0; border-radius: 6px;}
.btn.disabled, .btn:disabled {color: #fff; background-color: #949494; border-color: transparent; opacity: 1;}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--main-color01);
    --bs-btn-border-color: var(--main-color01);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--main-color01-hover);
    --bs-btn-hover-border-color: var(--main-color01-hover);
    --bs-btn-focus-shadow-rgb: var(--main-color01-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--main-color01-hover);
    --bs-btn-active-border-color: var(--main-color01-hover);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--main-color01-rgb), 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--main-color01);
    --bs-btn-disabled-border-color: var(--main-color01);
}
.btn-outline-primary {
    --bs-btn-color: var(--main-color01);
    --bs-btn-border-color: var(--main-color01);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--main-color01);
    --bs-btn-hover-border-color: var(--main-color01);
    --bs-btn-focus-shadow-rgb: var(--main-color01-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--main-color01);
    --bs-btn-active-border-color: var(--main-color01);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--main-color01);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--main-color01);
    --bs-gradient: none;
}
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-secondary-hover);
    --bs-btn-hover-border-color: var(--bs-secondary-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-secondary-hover);
    --bs-btn-active-border-color: var(--bs-secondary-hover);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
}
.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-secondary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-secondary);
    --bs-gradient: none;
}
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-danger-hover);
    --bs-btn-hover-border-color: var(--bs-danger-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-danger-hover);
    --bs-btn-active-border-color: var(--bs-danger-hover);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-danger);
    --bs-btn-disabled-border-color: var(--bs-danger);
}
.btn-outline-danger {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-border-color: var(--bs-danger);
    --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-danger);
    --bs-btn-active-border-color: var(--bs-danger);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-danger);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-danger);
    --bs-gradient: none;
}
.btn-page {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 5px;
    margin-top: 20px;
}
.btn-page .btn {
    display: block;
    width: 100%;
    min-width: 200px;
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.09);
}
.btn-page .btn > i {
    display: none;
}
@media (min-width: 576px) {
    .btn-page {
        margin-top: 30px;
    }
    .btn-page .btn {
        display: inline-block;
        width: auto;
        padding: 15px 30px;
    }
    .btn-page .btn > i {
        display: inline-block;
        font-size: 16px;
        margin-left: 12px; 
    }
}

/* tit */
.cont-tit {
    position: relative;
    font-family: var(--font-type02);
    font-size: 20px;
    font-weight: 400;
    color: #111;    
    padding-top: 28px;
    margin-top: 12px;
    margin-bottom: 15px;
    text-align: center;
}
.cont-tit::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 5px);
    width: 11px;
    height: 11px;
    border-radius: 50px;
    background-color: var(--point-color01);
    box-shadow: 7px 0 0 var(--main-color01);
    transform: translateX(-50%);
}
[class*="tit-h"] {font-family: var(--font-type02); font-weight: 400; position: relative; margin-bottom: 10px;} 
[class*="tit-h"]:first-child, [class*="tit-h"] + [class*="tit-h"] {margin-top:0;}
.tit-h3 {font-size: 17px; color: var(--main-color01); margin-top: 30px;}
@media (min-width: 576px) {
    .cont-tit {font-size: 24px; margin-bottom: 20px;}
    .tit-h3 {font-size: 19px; margin-top: 40px;}
}

/* table */
.table > :not(caption) > * > * {color: #333;}
thead, tbody, tfoot, tr, th, td {border-color: var(--form-color01);}
thead > tr {border: 0;}
.table, .table th {border-top: 1px solid var(--form-color01);}
.table th, .table td {vertical-align: middle; padding: 12px;}
.table thead th {background-color: #f4f5f6; color: var(--bs-gray-900); text-align: center;}
.table tbody th {background-color: #f5faff; color: var(--bs-gray-700); font-weight: 500; text-align: center;}
.table tbody th label {margin-bottom: 0;}
.table tbody td {height: 60px;}
.table .btn {font-size: 14px; padding: 5px 10px; margin: 0;}
.table label, .table .label {margin-bottom: 0;}
.table-sm {font-size: 15px;}
.table-sm th, .table-sm td {padding: 8px;}
.table-sm tbody td {height: 50px;}

/* table-responsive */
.table-mw-800 .table {min-width: 800px;}
.table-mw-900 .table {min-width: 900px;}
.table-mw-1000 .table {min-width: 1000px;}
.table-mw-1100 .table {min-width: 1100px;}
.table-mw-1200 .table {min-width: 1200px;}
.table-mw-1300 .table {min-width: 1300px;}
.table-mw-1400 .table {min-width: 1400px;}
.table-responsive {margin-bottom: 16px;}
.table-responsive .table {margin-bottom: 0; border-top: 2px solid #000;}
.table-responsive th, .table-responsive td {word-break: keep-all;}
@media (min-width: 576px) {
    .table-responsive-sm th, .table-responsive-sm td {word-break: break-all;}
}
@media (min-width: 768px) {
    .table-responsive-md th, .table-responsive-md td {word-break: break-all;}
}
@media (min-width: 992px) {
    .table-responsive-lg th, .table-responsive-lg td {word-break: break-all;}
}
@media (min-width: 1200px) {
    .table-responsive-xl th, .table-responsive-xl td {word-break: break-all;}
}
@media (min-width: 1500px) {
    .table-responsive-xxl th, .table-responsive-xxl td {word-break: break-all;}
}


/*****************************************************
form
*****************************************************/
label, .label {position: relative; display: inline-block; margin-bottom: 5px; font-weight: 500;}
label.req, .label.req {padding-right: 11px;}
label.req::after, .label.req::after {content: "필수입력 항목입니다."; position: absolute; top: 4px; right: 0; text-indent: -9999px; width: 8px; height: 8px; font-size: 0; background: url("/Outlink/Join/images/req-icon.svg") no-repeat right center/cover;}
select {min-width: 80px; appearance: none; background-image: url("/Outlink/Join/images/arrow-icon01.png"); background-repeat: no-repeat; background-position: top calc(50% + 1px) right 10px;}
.form-control {position: relative; height: auto; min-height: 42px; padding: .5rem .75rem; border: 1px solid var(--form-color01); border-radius: 6px;}
.form-control:focus {z-index: 5;}
.form-control:disabled, .form-control[readonly] {background-color: #eee; opacity: .65;}
.form-control::placeholder {color: #909090;}
textarea.form-control {min-height: 90px;}
select.form-control {padding-right: 36px;}
.input-group > .form-control:first-of-type:not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {border-top-left-radius: 6px; border-bottom-left-radius: 6px;}
.input-group .d-flex:not(:first-child) .form-control {
    border-radius: 0;
}
.input-group .d-flex:not(:first-child) .form-control:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.input-group .d-flex:not(:first-child) .btn {
    border-radius: 0;
}
.input-group .d-flex:not(:first-child) .btn:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* form-check */
.form-check {margin-top: 8px; user-select: none;}
.form-check-inline {margin-right: 25px;}
.form-check:not(.form-switch) {padding-left: 0;}
.form-check:not(.form-switch) input {position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}
.form-check:not(.form-switch) label {position: relative; padding-left: 28px; margin: 0; cursor: pointer; font-weight: 400; line-height: 20px; text-align: left;}
.form-check:not(.form-switch):last-of-type {margin-right: 0;}
.form-check:not(.form-switch) label::after {content: ""; position: absolute; left: 0; top: 50%; display: block; width: 20px; height: 20px; transform: translateY(-50%); background-color: #fff; border: 1px solid #bbb;}
.form-check:not(.form-switch) input:focus + label::after {border: 2px solid var(--main-color01);}
.form-check:not(.form-switch) input:focus-visible + label::after {outline-offset: -2px; outline: 3px dashed var(--point-color01); border-radius: 6px;}
.form-check:not(.form-switch) input:disabled + label {cursor: default;}
.form-check:not(.form-switch) input:disabled + label::after {background-color: #e7e7e7;}
.form-check:not(.form-switch) input:checked:disabled + label::after {filter: contrast(.25) brightness(1.25);}
.form-check:not(.form-switch) label::before {z-index: 1; position: absolute; top: 50%; transform: translateY(-50%);}
.form-check:not(.form-switch) [type="checkbox"] + label::after {border-radius: 5px;}
.form-check:not(.form-switch) [type="checkbox"]:checked + label::after {background-color: var(--main-color01); border: 0;}
.form-check:not(.form-switch) [type="checkbox"]:checked + label::before {content: ""; top: 50%; left: 0; width: 20px; height: 20px; background: url("/Outlink/Join/images/form-check.svg") no-repeat center; transform: translateY(-50%);}
.form-check:not(.form-switch) [type="radio"] + label::after {border-radius: 22px;}
.form-check:not(.form-switch) [type="radio"]:checked + label::after {border-color: var(--main-color01);}
.form-check:not(.form-switch) [type="radio"]:checked + label::before {content: ""; left: 5px; display: block; width: 10px; height: 10px; border-radius: 11px; background-color: var(--main-color01);}
.form-check.input-only {display: flex; align-items: center; justify-content: center; width: auto; margin: 0;}
.form-check.input-only label {width: 20px; height: 20px; padding-left: 20px; overflow: hidden;}
.form-box.is-invalid label::after, .form-check.is-invalid label::after {border-color: var(--bs-danger);}
.table .form-check {margin-top: 2px; margin-bottom: 2px;}
.table .form-check:not(.form-switch).input-only {display: flex; align-items: center; justify-content: center;}
.table .form-switch {display: inline-block;}

/* form-switch */
.form-switch {padding-left: 40px;}
.form-switch .form-check-input {--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 10 10'%3e%3ccircle r='3' fill='%23FFFFFF'/%3e%3c/svg%3e"); width: 40px; height: 22px; margin-left: -40px; margin-top: 3px; border-color: var(--bs-secondary); background-color: var(--bs-secondary); background-image: var(--bs-form-switch-bg); background-position: left center; border-radius: 50px; opacity: .4; transition: background-position .15s ease-out; cursor: pointer;}
.form-switch .form-check-input:focus {--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 10 10'%3e%3ccircle r='3' fill='%23FFFFFF'/%3e%3c/svg%3e");}
.form-switch .form-check-input:checked {border-color: var(--main-color01); background-color: var(--main-color01); background-position: right center; --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 10 10'%3e%3ccircle r='3' fill='%23FFFFFF'/%3e%3c/svg%3e"); opacity: 1;}
.form-switch .form-check-label {display: inline-block; margin: 1px 0; margin-left: 10px; font-weight: 400; cursor: pointer;}

/* input-group */
.input-group .btn {padding: 0.375rem 0.75rem; margin: 0; margin-left: -1px; line-height: 1;}
.input-group .form-btn {min-width: 42px;background-color: #fff;border: 1px solid var(--form-color01);color: var(--bs-secondary);}
.input-group .form-btn:hover, .input-group .form-btn:focus {border-color: var(--bs-secondary); z-index: 10;}
.input-group .form-btn.disabled, .input-group .form-btn:disabled {background-color: #eee; opacity: .65;}
.input-group .input-group-text {padding: .5rem .75rem; background-color: var(--form-color03); border-color: var(--form-color01); color: #707070;}
.input-group .input-group-text.active {background-color: #fff; color: #333;}
.input-group.is-invalid > * {border-color: var(--bs-danger);}
.input-group.is-invalid [class*="form-"]:focus {box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);border-color: var(--bs-danger); z-index: 10;}


/*****************************************************
    content
*****************************************************/
/* logout-box */
.logout-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px 24px;
    margin-bottom: 10px;
    padding: 0 10px;
}
.logout-box .txt {
    position: relative;
    padding-left: 22px;
}
.logout-box .txt::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 16px;
    height: 16px;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-image: url("/Outlink/Join/images/icon-user.svg");
    -webkit-mask-image: url("/Outlink/Join/images/icon-user.svg");
    background-color: #222;
    transform: translateY(-50%);
}
.logout-box .logout {
    position: relative;
    padding-left: 22px;
}
.logout-box .logout::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 16px;
    height: 16px;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-image: url("/Outlink/Join/images/icon-logout.svg");
    -webkit-mask-image: url("/Outlink/Join/images/icon-logout.svg");
    background-color: #222;
    transform: translateY(-50%);
}
.logout-box .logout:hover::before, .logout-box .logout:focus::before {
    background-color: var(--main-color01);
}
.logout-box .logout::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -12px;
    width: 1px;
    height: 16px;
    background-color: #ccc;
    transform: translateY(-50%);
}
@media (min-width: 576px) {
    .logout-box {
        margin-bottom: 15px;
    }
}

/* cont-scroll */
.cont-scroll {
    overflow: auto;
    margin-bottom: 16px;
}
.cont-scroll .table th, .cont-scroll .table td {
    height: 60px;
}

/* cont-box */
.popup-cont > *:last-child {margin-bottom: 0;}
.popup-cont .cont-box {
    position: relative;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 5px 25px 40px rgba(0, 0, 0, .08);
    background-color: #fff;
    overflow: hidden;
    z-index: 0;
}
.popup-cont .cont-box::before {
    content: "";
    position: absolute;
    bottom: -84px;
    right: -56px;
    width: 300px;
    height: 369px;
    mask-image: url("/Outlink/Join/images/symbol.svg");
    -webkit-mask-image: url("/Outlink/Join/images/symbol.svg");
    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: var(--main-color01);
    opacity: 0.03;
    z-index: -1;
}
.popup-cont .cont-box:has(.no-data)::before {
    display: none;
}
@media (min-width: 768px) {
    .popup-cont .cont-box {
        min-height: 450px;
    }
}

/* info-text */
.info-text {position: relative; padding-left: 23px;}
.info-text::before {content: "\F430"; position: absolute; display: block; top: 1px; left: 0; font-family: var(--font-icon); color: var(--main-color01); border-radius: 50px; box-shadow: 3px 6px 10px rgba(0, 0, 0, 0.05); opacity: .95;}
.info-text.text-danger::before {color: var(--bs-danger);}
.info-text.text-secondary::before {color: var(--bs-secondary);}

/* list-style */
[class*="list-style0"] li {margin-bottom: 7px;}
[class*="list-style0"] > li:last-child {margin-bottom: 0;} 
[class*="list-style0"] > li > [class*="list-style0"] {margin-top: 7px;} 
ul[class*="list-style0"] {list-style: none;} 
ul.list-style01 > li {position: relative; padding-left: 12px;} 
ul.list-style01 > li::after {content: ""; position: absolute; top: 10px; left: 0; display: block; width: 4px; height: 4px; border-radius: 50px; background-color: var(--main-color01);} 
ul.list-style02 > li {position: relative; padding-left: 14px;}
ul.list-style02 > li::after {content: ""; position: absolute; top: 11px; left: 0; display: block; width: 6px; height: 3px; border-radius: 2px; background: var(--bs-gray-500);} 
ol.list-style01 {list-style: decimal-leading-zero; padding-left: 28px;} 
ol.list-style01 > li {list-style: inherit; padding-left: 8px;} 
ol.list-style01 li::marker, ol.list-style02 li::marker {font-family: var(--font-type02); font-size: 15px; font-weight: 400; color: var(--main-color01);} 
ol.list-style02 {list-style: hangul; padding-left: 25px;} 
ol.list-style02 > li {list-style: inherit; padding-left: 8px;}
@media (min-width: 992px) {ul.list-style01 > li {padding-left: 14px;} 
    ul.list-style01 > li::after {width: 6px; height: 6px;} 
}

/* tab */
.tab-select {
    border: 2px solid var(--bs-gray-200);
    border-radius: var(--radius-sm);
}
.tab-select:hover, .tab-select:focus {
    border-color: var(--main-color01-hover);
}
.tab-style01 {
    border: 0;
    gap: 6px;
    margin-bottom: 20px;
}
.tab-style01 .nav-item {
    flex: 0 1 calc(50% - 4px);
    margin: 0;
}
.tab-style01 .nav-item .nav-link {
    width: 100%;
    height: 100%;
    background-color: var(--bg-color02);
    color: var(--bs-gray-600);
    border: 2px solid var(--bg-color02);
    border-radius: var(--radius-sm);
    font-weight: 400;
    font-family: var(--font-type02);
    padding: 14px 16px 8px;
}
.tab-style01 .nav-item .nav-link:focus, .tab-style01 .nav-item .nav-link:hover {
    border-color: var(--bs-gray-400);
}
.tab-style01 .nav-item .nav-link.active {
    background-color: var(--bs-white);
    border: 2px solid var(--main-color01);
    color: var(--main-color01);
}
@media (min-width: 992px) {
    .tab-style01 {
        gap: 10px;
        margin-bottom: 30px;
    }
    .tab-style01 .nav-item {
        flex: 1 1 calc(25% - 10px);
    }
    .tab-style01 .nav-item:nth-child(n + 4) {
        flex: 0 1 calc(25% - 8px);
    }
    .tab-style01 .nav-item .nav-link {
        padding: 18px 18px 14px;
    }
    .tab-style01 .nav-item .nav-link.active {
        box-shadow: var(--shadow);
    }
}
@media (min-width: 1400px) {
    .tab-style01 .nav-item {
        flex: 1 1 calc(100% / 6 - 10px);
    }
    .tab-style01 .nav-item:nth-child(n + 4) {
        flex: 1 1 calc(100% / 6 - 10px);
    }
    .tab-style01 .nav-item:nth-child(n + 7) {
        flex: 0 1 calc(100% / 6 - 8px);
    }
}

/* info-box-style01 */
.info-box-style01 {
    border: 3px dotted #c5d4f4;
    border-radius: var(--radius);
    display: flex;
    padding: 20px 24px;
    flex-direction: column;
    row-gap: 16px;
    margin-bottom: 30px;
}
.info-box-style01 .icon {
    width: 60px;
    height: 60px;
    border-radius: var(--circle);
    position: relative;
    background: var(--bg-color01);
}
.info-box-style01 .icon img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: auto;
}
.info-box-style01 .txt-box .tit {
    color: var(--main-color01);
    font-family: var(--font-type02);
    font-size: 18px;
}
.info-box-style01 .txt-box .list {
    margin-bottom: 10px;
}
.info-box-style01 .txt-box .list li {
    position: relative;
    padding-left: 22px;
    color: var(--bs-gray-600);
    margin-bottom: 5px;
}
.info-box-style01 .txt-box .list li:after {
    content: "\F4B6";
    position: absolute;
    top: 2px;
    left: 0;
    font-family: var(--font-icon);
}
.info-box-style01 .txt-box .btn {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 3px 20px 5px;
    border: 1px solid var(--main-color01-hover);
    border-radius: var(--oval);
    background-color: #fff;
    color: var(--main-color01-hover);
    text-align: center;
}
.info-box-style01 .txt-box .btn:focus, .info-box-style01 .txt-box .btn:hover {
    background: var(--main-color01-hover);
    color: #fff;
}
.info-box-style01 .txt-box .btn::after {
    content: "\F285";
    display: inline-block;
    width: 10px;
    height: 10px;
    font-size: 11px;
    opacity: 0.8;
    margin-left: 5px;
    transition: 0.3s;
    font-family: var(--font-icon);
}
.info-box-style01 .txt-box > *:last-child {
    margin-bottom: 0;
}
.info-box-style02 {
    position: relative;
    padding: 30px;
    border-radius: var(--radius);
    background-color: #f8f8fb;
    margin-bottom: 1rem;
    overflow: hidden;
}
.info-box-style02 > *:last-child {
    margin-bottom: 0;
}
@media (min-width: 992px) {
    .info-box-style01 {
        flex-direction: row;
        column-gap: 40px;
        padding: 36px 42px;
    }
    .info-box-style01 .icon {
        width: 80px;
        height: 80px;
        flex: 0 1 80px;
    }
    .info-box-style01 .icon img {
        width: 38px;
    }
    .info-box-style01 .txt-box {
        flex: 1 1 10%;
    }
    .info-box-style01 .txt-box .tit {
        font-size: 20px;
    }
    .info-box-style01 .txt-box .list li {
        padding-left: 24px;
    }
}

/* board-search */
.board-search {padding: 23px; background-color: var(--form-color03); margin-bottom: 20px;}
.board-search > .row {align-items: center;}
.board-search select {appearance: none; background-image: url("/Outlink/Join/images/board-arrow.svg"); background-position: center right 13px; background-repeat: no-repeat; color: #555;}
.board-search .form-control {border-color: var(--form-color01);}
.board-search .form-btn {border-color: var(--form-color01); color: #000;}
.board-search .search-info {display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dashed #d5d5d5;}
.board-search .search-info .text-total {flex: 1 1 100%; margin-bottom: 10px;}
.board-search .search-info .select-box {flex: 1 1 100%; display: flex; flex-wrap: wrap; position: relative;}
.board-search .search-info .select-box > select {flex: 1 1 100%; margin-bottom: 6px;}
.board-search .search-info .select-box:last-child > select {margin-bottom: 0;}
.board-search .search-info .select-box > .btn {flex: 1 1 100%; background-color: var(--bs-secondary); color: #fff;}
.board-search .search-info .select-box > .btn:hover,
.board-search .search-info .select-box > .btn:focus {background-color: var(--bs-secondary-hover);}
.board-search .input-group {justify-content: flex-end;}
.board-search .input-group:not(.flex-nowrap) > .form-control {flex: 1 1 100%; margin-bottom: 6px;}
@media(min-width: 768px) {
    .board-search .search-info {margin-bottom: 10px; padding-bottom: 0; border-bottom: 0;}
    .board-search .search-info .text-total {flex: 1 1 auto; margin-bottom: 0;}
    .board-search .search-info .select-box {flex: 0 0 auto; display: inline-block; margin-left: 6px;}
    .board-search .search-info .select-box > select {margin-bottom: 0;}
    .board-search .search-info .select-box > .btn {flex: 0 0 auto; background-color: transparent; border: 1px solid var(--bs-secondary); color: inherit;}
    .board-search .search-info .select-box > .btn:hover,
    .board-search .search-info .select-box > .btn:focus {background-color: var(--form-color03); border-color: var(--bs-secondary-hover); color: var(--bs-secondary-hover);}
    .board-search .input-group:not(.flex-nowrap) > .form-control {flex: 1 1 auto; margin-bottom: 0;}
}
@media(min-width: 1200px) {
    .board-search .search-info {margin-bottom: 0;}
    .board-search .search-info .text-total {flex: 0 0 auto;}
    .board-search .search-info .text-total + .select-box {margin-left: 15px;}
}

/* pagination */
.pagination {gap: 0 5px; margin-top: 30px; justify-content: center;}
.pagination .page-item .page-link {display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background-color: transparent; border-color: transparent; font-size: 15px; color: #767676; line-height: 1; transition: all .3s ease-out;}
.pagination .page-item.active .page-link {color: #000; font-size: 16px; font-weight: 600;}
.pagination .page-item {display: none;}
.pagination .page-item[class*="go-"],
.pagination .page-item.active,
.pagination .page-item:nth-last-of-type(3) {display: block;}
.pagination .page-item[class*="go-"] .page-link {border-radius: 50%; border: 1px solid #ddd;}
.pagination .page-item:nth-last-of-type(3) .page-link::before {content: "/"; position: absolute; top: 50%; left: -4px; transform: translateY(-50%);}
.pagination .page-item.go-prev {margin-right: 5px;}
.pagination .page-item.go-next {margin-left: 5px;}
@media(min-width: 768px) {
    .pagination .page-item {display: block;}
    .pagination .page-item .page-link {width: 40px; height: 40px; font-size: 16px; font-weight: 600;}
    .pagination .page-item .page-link:hover,
    .pagination .page-item .page-link:focus {color: #000; background-color: #f5f5f5;}
    .pagination .page-item.active .page-link {color: #fff; background-color: #333;}
    .pagination .page-item:nth-last-of-type(3) .page-link::before {display: none;}
    .pagination .page-item.go-prev {margin-right: 15px;}
    .pagination .page-item.go-next {margin-left: 15px;}
}

/* card-agree */
.card-agree {
    margin-bottom: 20px;
    border-color: var(--form-color01);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.card-agree .card-header {
    padding: 20px 20px 0;
    border: 0;
    background-color: transparent;
}
.card-agree .card-header .tit {
    position: relative;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 0;
    padding-bottom: 15px;
    border-bottom: 1px dashed #d5d5d5;
}
.card-agree .card-body {
    padding: 15px 20px 15px;
}
.card-agree .card-body > *:last-child {
    margin-bottom: 0;
}
.card-agree .card-body .table > tbody th {
    background-color: transparent;
    color: inherit;
    font-weight: inherit;
}
.card-agree .card-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    padding: 15px 25px;
    border-top: 0;
    background-color: var(--form-color03);
    transition: all .3s ease-out;
}
.card-agree.on .card-footer {
    background-color: var(--form-color02);
}
.card-agree .card-body + .card-footer {
    border-top: 1px solid var(--form-color01);
}
.card-agree .card-footer .form-box {
    white-space: nowrap;
}
@media (min-width: 576px) {
    .card-agree .card-header {
        padding: 30px 30px 0;
    }
    .card-agree .card-header .tit {
        font-size: 19px;
        padding-bottom: 20px;
    }
    .card-agree .card-body {
        padding: 20px 30px 25px;
    }
    .card-agree .card-footer {
        padding: 20px 35px;
    }
}

/* no-data */
.no-data {width: 100%; max-width: 100%; padding: 100px 0; text-align: center;}
.no-data .icon {max-width: 80px;}
.no-data .img {max-width: 120px;}
.no-data .tit {font-family: var(--font-type02); font-weight: 500; font-size: 18px; margin-bottom: 6px;}
.no-data .tit > strong {font-weight: inherit; color: var(--main-color01);}
.no-data > img + .tit {margin-top: 20px;}
.no-data .txt {color: var(--bs-secondary); margin-bottom: 0;}
.no-data > img + .txt {margin-top: 10px;}
.no-data .btn-box {margin-top: 30px;}
.no-data .btn-box .btn {min-width: 90px;}
[class*="table-"] > .no-data, [class*="board-"] > .no-data {
    border-top: 1px solid var(--form-color01);
    border-bottom: 1px solid var(--form-color01);
}
@media(min-width: 768px) {
    .no-data .img {max-width: 150px;}
    .no-data .tit {font-size: 20px;}
}


/*****************************************************
    popup-class
*****************************************************/
.popup-class {
    background: url("/Outlink/Join/images/popup-bg.png") no-repeat;
    background-size: auto 50%;
    background-position: top left;
    padding-bottom: 40px;
}
.popup-class .container {
    max-width: 100%;
    padding: 0 15px;
}
@media (min-width: 576px) {
    .popup-class {
        background-size: 100% auto;
    }
}
@media (min-width: 768px) {
    .popup-class .container {
        padding: 0 30px;
    }
}
@media (min-width: 900px) {
    .popup-class .container {
        padding: 0 20px;
    }
}
@media (min-width: 992px) {
    .popup-class .container {
        padding: 0 30px;
    }
}
@media (min-width: 1200px) {
    .popup-class {
        padding-bottom: 50px;
    }
    .popup-class .container {
        max-width: 1140px;
    }
}
@media (min-width: 1920px) {
    .popup-class {
        background-size: 100% 850px;
    }
}

/* popup-header */
.popup-class .popup-header {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 360px;
    height: 80px;
    padding: 20px;
    background: linear-gradient(30deg, #0673FD, #055AC7);
    border-radius: 0 0 20px 20px;
}
.popup-class .popup-header > .container {
    display: flex;
    justify-content: space-between;
}
.popup-class .popup-header .logo-box {
    margin-bottom: 0;
    line-height: 1;
}
.popup-class .popup-header .logo-box .logo {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    color: #333;
    text-align: center;
}
.popup-class .popup-header .logo-box .logo .img {
    display: block;
    flex: 0 0 108px;
    max-width: 108px;
    height: 28px;
    background-image: url("/Outlink/Join/images/logo-white.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}
.popup-class .popup-header .logo-box .logo .txt {
    display: inline-lbock;
    margin-top: 3px;
    font-family: var(--font-type02);
    font-size: 18px;
    color: #fff;
}
@media (min-width: 576px) {
    .popup-class .popup-header .logo-box .logo .img {
        flex: 0 0 120px;
        max-width: 120px;
        height: 35px;
    }
    .popup-class .popup-header .logo-box .logo .txt {
        font-size: 20px;
    }
}
@media (min-width: 992px) {
    .popup-class .popup-header {
        height: 90px;
        padding: 25px 30px 30px;
    }
}
@media (min-width: 1200px) {
    .popup-class .popup-header {
        height: 100px;
    }
}

/* popup-cont */
.popup-cont {
    padding-top: 100px;
}
.popup-cont .class-top {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}
.popup-cont .class-top .login-wrap {
    position: relative;
    flex: 1;
    padding: 30px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 5px 25px 40px rgba(0,0,0,.08);
    overflow: hidden;
    z-index: 0;
}
.popup-cont .class-top .login-wrap::before {
    content: "";
    position: absolute;
    bottom: -84px;
    right: -56px;
    width: 300px;
    height: 369px;
    mask-image: url("/Outlink/Join/images/symbol.svg");
    -webkit-mask-image: url("/Outlink/Join/images/symbol.svg");
    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: var(--main-color01);
    opacity: 0.03;
    z-index: -1;
}
.popup-cont .class-top .login-wrap.active fieldset {
    margin-top: 0;
}
.popup-cont .class-top .login-wrap .cont_box .login-box {
    min-height: 219px;
    margin-bottom: 12px;
}
.popup-cont .class-top .login-wrap .cont_box .login-box > li {
    position: relative;
    display: flex;
    align-items: center;
    height: auto;
    padding: 18px 18px 18px 54px;
    margin-top: 12px;
    border: 1px solid var(--form-color01);
    border-radius: 8px;
    background-color: #fff;
    transition: all .3s ease-out;
}
.popup-cont .class-top .login-wrap .cont_box .login-box > li:first-child {
    margin-top: 0;
}
.popup-cont .class-top .login-wrap .cont_box .login-box > li.active {
    border-color: var(--main-color01);
}
.popup-cont .class-top .login-wrap .cont_box .login-box > li.disabled {
    background-color: #f0f0f0;
}
.popup-cont .class-top .login-wrap .cont_box .login-box > li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 20px;
    width: 18px;
    height: 18px;
    mask-size: contain;
    -webkit-mask-size: contain;
    transform: translateY(-50%);
    transition: all .3s ease-out;
}
.popup-cont .class-top .login-wrap .cont_box .login-box > li.user::before {
    mask-image: url("/Outlink/Join/images/icon-user.svg");
    -webkit-mask-image: url("/Outlink/Join/images/icon-user.svg");
    background-color: #8A96A2;
}
.popup-cont .class-top .login-wrap .cont_box .login-box > li.date::before {
    mask-image: url("/Outlink/Join/images/icon-date.svg");
    -webkit-mask-image: url("/Outlink/Join/images/icon-date.svg");
    background-color: #8A96A2;
}
.popup-cont .class-top .login-wrap .cont_box .login-box > li.tel::before {
    mask-image: url("/Outlink/Join/images/icon-tel.svg");
    -webkit-mask-image: url("/Outlink/Join/images/icon-tel.svg");
    background-color: #8A96A2;
}
.popup-cont .class-top .login-wrap .cont_box .login-box > li.active::before {
    background-color: var(--main-color01);
}
.popup-cont .class-top .login-wrap .cont_box .login-box > li .input-field {
    width: 100%;
    padding-left: 15px;
    outline: 0;
    border: 0;
    border-left: 1px solid #e5e5e5;
    box-shadow: none;
}
.popup-cont .class-top .login-wrap .cont_box .login-box > li .input-field:disabled {
    border-left-color: #d5d5d5;
    background-color: transparent;
}
.popup-cont .class-top .login-wrap .cont_box .login-box > li .input-field:-webkit-autofill,
.popup-cont .class-top .login-wrap .cont_box .login-box > li .input-field:-webkit-autofill:hover,
.popup-cont .class-top .login-wrap .cont_box .login-box > li .input-field:-webkit-autofill:focus,
.popup-cont .class-top .login-wrap .cont_box .login-box > li .input-field:-webkit-autofill:active {
    -webkit-text-fill-color: #333;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}
.popup-cont .class-top .login-wrap .cont_box .login-box > li .input-field:autofill,
.popup-cont .class-top .login-wrap .cont_box .login-box > li .input-field:autofill:hover,
.popup-cont .class-top .login-wrap .cont_box .login-box > li .input-field:autofill:focus,
.popup-cont .class-top .login-wrap .cont_box .login-box > li .input-field:autofill:active {
    -webkit-text-fill-color: #333;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}
.popup-cont .class-top .login-wrap .cont_box .login-box > li .input-field::placeholder {
    color: #aaa;
}
.popup-cont .class-top .login-wrap .cont_box .login-box > li .input-label {
    position: absolute;
    top: -10px;
    left: 14px;
    color: #aaa;
    font-size: 14px;
    font-weight: 500;
    padding: 0 6px;
    transition: all .3s ease-out;
    opacity: 0;
}
.popup-cont .class-top .login-wrap .cont_box .login-box > li .input-field:focus + .input-label {
    color: var(--main-color01);
    background-color: #fff;
    z-index: 10;
    opacity: 1;
}
.popup-cont .class-top .login-wrap .put_box .btn {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 18px;
    font-size: 17px;
    font-weight: 500;
    border-radius: 8px;
}
.popup-cont .class-top .banner {
    position: relative;
    flex: 1 1 100%;
    padding-top: 80%;
    background-color: #f8f8fb;
    border-radius: 15px;
    overflow: hidden;
}
.popup-cont .class-top .banner > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (min-width: 576px) {
    .popup-cont {
        padding-top: 110px;
    }
    .popup-cont .class-top .login-wrap {
        padding: 35px;
    }
    .popup-cont .class-top .login-wrap .cont_box .login-box > li {
        min-height: 65px;
    }
}
@media (min-width: 768px) {
    .popup-cont .class-top .login-wrap {
        padding: 40px;
    }
}
@media (min-width: 900px) {
    .popup-cont .class-top .login-wrap {
        padding: 35px;
    }
    .popup-cont .class-top .banner {
        flex: 0 0 40%;
        min-width: 475px;
        padding-top: 0;
    }
}
@media (min-width: 992px) {
    .popup-cont {
        padding-top: 130px;
    }
    .popup-cont .class-top {
        gap: 20px;
        margin-bottom: 25px;
    }
    .popup-cont .class-top .login-wrap {
        padding: 40px;
    }
    .popup-cont .class-top .login-wrap .cont_box .login-box > li {
        padding: 18px 18px 18px 64px;
    }
    .popup-cont .class-top .login-wrap .cont_box .login-box > li::before {
        left: 25px;
        width: 20px;
        height: 20px;
    }
    .popup-cont .class-top .login-wrap .cont_box .login-box > li .input-field {
        padding-left: 20px;
    }
    .popup-cont .class-top .login-wrap .put_box .btn {
        font-size: 18px;
    }
}
@media (min-width: 1200px) {
    .popup-cont {
        padding-top: 150px;
    }
    .popup-cont .class-top {
        gap: 30px;
    }
}

.popup-cont .class-info {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;
    font-size: 14px;
}
.popup-cont .class-info .item {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 8px 16px;
    padding: 20px;
    border-top: 1px dashed var(--bs-gray-300);
}
.popup-cont .class-info .item:nth-child(1) {
    border-top: 0;
}
.popup-cont .class-info .item .img {
    flex: 0 0 45px;
    max-width: 45px;
    display: flex;
    align-items: center;
}
.popup-cont .class-info .item .tit-box .period {
    display: inline-block;
    margin-bottom: 5px;
    color: #8A949E;
}
.popup-cont .class-info .item .tit-box .tit {
    display: block;
    color: #545454;
    line-height: 1.3;
}
@media (min-width: 576px) {
    .popup-cont .class-info {
        margin: 30px 0;
    }
    .popup-cont .class-info .item {
        flex: 1 1 40%;
        gap: 8px 20px;
        padding: 20px 25px;
        border-right: 1px dashed var(--bs-gray-300);
    }
    .popup-cont .class-info .item:nth-child(2) {
        border-top: 0;
    }
    .popup-cont .class-info .item:nth-child(2n) {
        border-right: 0;
    }
}
@media (min-width: 992px) {
    .popup-cont .class-info {
        font-size: 15px;
        margin: 50px 0;
    }
    .popup-cont .class-info .item {
        flex: 1 1 30%;
        flex-flow: column;
        text-align: center;
        padding: 30px;
    }
    .popup-cont .class-info .item:nth-child(3) {
        border-top: 0;
    }
    .popup-cont .class-info .item:nth-child(2n) {
        border-right: 1px dashed var(--bs-gray-300);
    }
    .popup-cont .class-info .item:nth-child(3n) {
        border-right: 0;
    }
    .popup-cont .class-info .item:last-child {
        border-right: 0;
    }
    .popup-cont .class-info .item .tit-box .tit {
        font: 16px;
    }
}
@media (min-width: 1200px) {
    .popup-cont .class-info .item {
        flex: 0 0 25%;
    }
    .popup-cont .class-info .item:nth-child(4) {
        border-top: 0;
    }
    .popup-cont .class-info .item:nth-child(3n) {
        border-right: 1px dashed var(--bs-gray-300);
    }
    .popup-cont .class-info .item:nth-child(4n) {
        border-right: 0;
    }
}

/* popup-footer */
.popup-class .popup-footer {
    margin-top: 30px;
    text-align: center;
}
.popup-class .popup-footer .address {
    text-wrap-style: balance;
}
.popup-class .popup-footer .address > span {
    position: relative;
    font-size: 15px;
    line-height: 1.4;
    color: #222;
    padding: 0 5px 0 11px;
}
.popup-class .popup-footer .address > span:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: #DEDEDE;
}
.popup-class .popup-footer .address > span:first-child:before {
    display: none;
}
.popup-class .popup-footer .copyright > span {
    font-size: 15px;
    color: #b5b5b5;
}
.popup-class .popup-footer .address + .copyright {
    margin-top: 2px;
}
@media(min-width: 768px) {
    .popup-class .popup-footer {
        margin-top: 40px;
    }
}