@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap');

/* document --------------------------- */
*, *::after, *::before {
    box-sizing: border-box;
}

html, body {
    position: relative;
    width: 100%;
    background-color: var(--white-back);
    margin: 0;
    padding: 0;
    border: 0;
    /* web font + system font */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-size: 62.5%; /* 1rem = 1rem */
    font-weight: 400;
    letter-spacing: -.02em;
    color: var(--gray700);
    /* smoothing font */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    transition: color .6s, background-color .6s;
}

/* typography --------------------------- */
h1, h2, h3, h4, h5, h6 {
    clear: both;
    margin: 0;
    padding: 0;
}

b, strong {
    /* add the correct font weight in Chrome, Edge, and Safari */
    font-weight: 600;
}

/* list style --------------------------- */
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* embedded content --------------------------- */
img {
    /* remove the border on images inside links in IE 10 */
    border-style: none;
}

/* form --------------------------- */
button, input, textarea, select, option {
    /* web font + system font */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    /* Remove the inheritance of text transform in Edge, Firefox and IE. */
    text-transform: none;
    background-color: transparent;
    letter-spacing: -.02em;
    font-weight: 400;
    /* Show the overflow in Edge and IE. */
    overflow: visible;
    cursor: pointer;
}

button:disabled, input:disabled {
    cursor: not-allowed;
}

button, [type='button'], [type='reset'], [type='submit'] {
    /* correct the inability to style clickable types in iOS and Safari */
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
}

[type='checkbox'], [type='radio'] {
    /* remove the padding in IE 10 */
    padding: 0;
    margin: 0;
}

textarea {
    width: 100%;
    /* remove the default vertical scrollbar in IE 10+ */
    overflow: auto;
    resize: none;
}

/* link --------------------------- */
a {
    color: var(--gray700);
    text-decoration: none;
    /* remove the gray background on active links in IE 10 */
    background-color: transparent;
    cursor: pointer;
}

a:visited, a:hover, a:active {
    color: var(--gray700);
    text-decoration: none;
}

a:focus {
    color: var(--gray700);
    text-decoration: none;
}

:focus {
    outline: none;
}

/* root ----------------------- */
:root {
    --black: #000000;
    --white: #ffffff;

    --gray900: #121212;
    --gray800: #1c1c1c;
    --gray700: #222222;
    --gray600: #2b2b2b;
    --gray500: #303030;
    --gray400: #444444;
    --gray300: #737373;
    --gray200: #c6c8ca;
    --gray100: #e3e5e9;
    --gray50: #f2f3f6;

    --blue900: #0d172d;
    --blue800: #001c48; /* main color */
    --blue700: #112e5e;
    --blue600: #294065;
    --blue500: #475c7b;
    --blue400: #667790;
    --blue300: #808da3;
    --blue200: #99a4b6;
    --blue100: #c6c8ca;
    --blue50: #d9dde4;

    --red: #ee2529; /* sub color */
    --light-red: #f5abac;
    --light-blue: #0061af;
    --sky-blue: #a2c6e2;
}
@media (prefers-color-scheme: dark) {
    :root {
        --black: #FFFFFF;
        --white: #121212;
        --white-back: #1C1C1C;

        --gray700: #f2f3f6;
        --gray400: #c6c8ca;
        --gray200: #444444;
        --gray100: #2B2B2B;
        --gray50: #121212;

        --blue800: #112e5e; /* main color */
    }
}

.desktop {display: block;}
.mobile {display: none;}

@media screen and (max-width: 768px) {
    .desktop {display: none;}
    .mobile {display: block;}
}

/* scroll */
::-webkit-scrollbar,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {opacity: 0; width: 0; height: 0; z-index: 99999;}

/* align */
.position-center {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.position-center-top {position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.position-center-left {position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}

/* text overflow */
.ellipsis {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} /* 한 줄 말줄임, width 지정 필요 */
.ellipsis.double {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} /* 두 줄 말줄임 */

/* font style */
.font-navy {color: var(--blue800)!important;}
.font-blue {color: var(--light-blue)!important;}
.font-red {color: var(--red)!important;}
.font-orange {color: var(--orange)!important;}

/* font weight */
.font400 {font-weight: 400;}
.font500 {font-weight: 500;}
.font600 {font-weight: 600;}

/* flex basic */
.flex-input {display: flex; align-items: center; grid-gap: 1.6rem 2.4rem; flex-wrap: wrap;}
.flex-input-ver {display: flex; flex-flow: column; row-gap: 2rem;}

.flex-select {display: flex; align-items: center; grid-gap: .8rem 1.6rem;}
.flex-select > li {width: 14rem;}
.flex-select select {width: 100%;}

.flex-phone {display: flex; align-items: center; column-gap: 1.6rem;}
.flex-phone > li {width: 14rem; position: relative; display: flex; align-items: center;}
.flex-phone > li:not(:last-child)::after {content: '-'; text-align: center; font-size: 1.8rem; font-weight: 500; color: var(--gray300); width: 1.6rem; position: absolute; right: -1.6rem;}
.flex-phone input, .flex-phone select {width: 100%;}

.flex-mail {display: flex; align-items: center; column-gap: 2.4rem;}
.flex-mail > li {width: 21.5rem; position: relative; display: flex; align-items: center;}
.flex-mail > li:nth-child(2)::before {content: '@'; text-align: center; font-size: 1.8rem; font-weight: 500; color: var(--gray300); width: 2.4rem; position: absolute; left: -2.4rem;}
.flex-mail input {width: 100%;}
.flex-mail select {width: 100%; margin-left: -.8rem;}

.flex-address {display: flex; flex-flow: column; row-gap: 1.6rem;}
.flex-address > li {display: flex; align-items: center; column-gap: 1.6rem;}
.flex-address > li button {width: 14rem; height: 5.2rem; margin: 0;}
.flex-address > li:nth-child(1) input {width: 14rem!important;}

.flex-identity {display: flex; align-items: center; column-gap: 1.6rem;}
.flex-identity > li {width: 21.5rem; position: relative; display: flex; align-items: center;}
.flex-identity > li:nth-child(2)::before {content: '-'; text-align: center; font-size: 1.8rem; font-weight: 500; color: var(--gray300); width: 1.6rem; position: absolute; left: -1.6rem;}
.flex-identity input {width: 100%;}
.flex-identity button {width: 14rem; height: 5.2rem;}

@media screen and (max-width: 768px) {
    .flex-input {flex-flow: column; align-items: flex-start;}
    .flex-input > li, 
    .flex-input input, .flex-input select, .flex-input button {width: 100%;}
    .flex-input-ver {row-gap: 1rem;}

    .flex-select {flex-flow: column; align-items: flex-start;}
    .flex-select > li {width: 100%;}
        
    .flex-phone {grid-gap: .8rem 1.4rem; flex-wrap: wrap;}
    .flex-phone > li {width: calc((100% - 2.8rem) / 2);}
    .flex-phone > li:not(:last-child)::after {font-size: 1.3rem; width: 1.4rem; right: -1.4rem;}

    .flex-mail {flex-wrap: wrap; grid-gap: .8rem 2rem;}
    .flex-mail > li {width: calc((100% - 2rem) / 2);}
    .flex-mail > li:nth-child(2)::before {font-size: 1.3rem; width: 2rem; left: -2rem;}
    .flex-mail > li:last-child {width: 100%;}
    .flex-mail select {margin-left: 0;}
    
    .flex-address {row-gap: .8rem;}
    .flex-address > li {grid-gap: .8rem; flex-wrap: wrap;}
    .flex-address > li button {width: 100%; height: 4rem; font-size: 1.3rem;}
    .flex-address > li:nth-child(1) input {width: 11rem!important;}
    .flex-address > li input {width: 100%;}
    
    .flex-identity {grid-gap: .8rem 1.4rem; flex-wrap: wrap;}
    .flex-identity > li {width: calc((100% - 1.4rem) / 2);}
    .flex-identity > li:nth-child(2)::before {font-size: 1.3rem; width: 1.4rem; left: -1.4rem;}
    .flex-identity > li:last-child,
    .flex-identity > li:last-child button {width: 100%; height: 4rem; font-size: 1.3rem;}
}

/* input */
input {height: 5.2rem; padding: 0 1.6rem; font-size: 1.8rem; font-weight: 500; background-color: var(--white); border: 1px solid var(--gray100);}
input::placeholder {color: var(--gray200);}

@media screen and (max-width: 768px) {
    input {height: 4rem; padding: 0 1.2rem; font-size: 1.3rem;}
}

/* input : checkbox */
input[type="checkbox"] {display: none;}
input[type="checkbox"] + label {display: flex; column-gap: .8rem; cursor: pointer;}
input[type="checkbox"] + label::before {content: ''; width: 2rem; height: 2rem; background-image: url(../img/ico/ic-checkbox.svg);}
input[type="checkbox"] + label > p {font-size: 1.8rem; flex: 1; line-height: 1.6;}
input[type="checkbox"] + label > p > a {font-size: 1.6rem; font-weight: 500; text-decoration: underline; color: var(--gray300);}

input[type="checkbox"]:checked + label::before {background-image: url(../img/ico/ic-checkbox-ov.svg);}

@media screen and (max-width: 768px) {
    input[type="checkbox"] + label {column-gap: .4rem; align-items: initial;}
    input[type="checkbox"] + label > p {font-size: 1.3rem; max-width: calc(100% - 2rem - .4rem); padding-top: .1rem;}
    input[type="checkbox"] + label > p > a {font-size: 1.3rem;}
}

/* input : radio */
input[type="radio"] {display: none;}
input[type="radio"] + label {display: flex; column-gap: .8rem; cursor: pointer;}
input[type="radio"] + label::before {content: ''; width: 2rem; height: 2rem; background-image: url(../img/ico/ic-radio.svg);}
input[type="radio"] + label > p {font-size: 1.8rem; flex: 1; line-height: 1.6;}

input[type="radio"]:checked + label::before {background-image: url(../img/ico/ic-radio-ov.svg);}

@media screen and (max-width: 768px) {
    input[type="radio"] + label {column-gap: .4rem;}
    input[type="radio"] + label > p {font-size: 1.3rem;}
}

/* input : file */
.file {display: flex; align-items: center; column-gap: 1.6rem;}
.file input[type='file'] {display: none;}
.file input[type='text'] {cursor: default; width: 45.2rem;}
.file label {width: 14rem; height: 5.2rem; margin: 0; font-size: 1.6rem; font-weight: 500; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--gray200); background-color: var(--white); color: var(--gray300);}

@media screen and (max-width: 768px) {
    .file {flex-flow: column; row-gap: .8rem;}
    .file input[type='text'] {flex: initial; width: 100%;}
    .file label {width: 100%; height: 4rem; font-size: 1.3rem;}
}

/* select */
select {height: 5.2rem; padding: 0 5.2rem 0 1.6rem; font-size: 1.8rem; font-weight: 500; color: var(--gray300); background-color: var(--white); border: 1px solid var(--gray100); background-image: url(../img/ico/ic-arrow-select.svg); background-repeat: no-repeat; background-size: 2.4rem; background-position: center right 1.4rem; cursor: pointer; -webkit-appearance: none; appearance: none;}
select::-ms-expand {display: none;/*for IE10,11*/}

@media screen and (max-width: 768px) {
    select {height: 4rem; padding: 0 4rem 0 1.2rem; font-size: 1.3rem; background-size: 1.6rem; background-position: center right 1.2rem;}
}

/* button */
.btn-wrap {margin-top: 10rem; display: flex; align-items: center; justify-content: center; column-gap: 1.6rem;}
.btn-wrap > button:nth-last-child(2) {border-color: var(--gray200); background-color: var(--white); color: var(--gray300);}

button {width: 20rem; height: 6rem; padding: 0 1.6rem; font-size: 2rem; font-weight: 500; color: #ffffff; background-color: var(--blue800); display: flex; align-items: center; justify-content: center; border: 1px solid var(--blue800); cursor: pointer;}

@media screen and (max-width: 768px) {
    .btn-wrap {margin-top: 4rem; column-gap: .8rem;}
    .btn-wrap button {width: calc((100% - .8rem) / 2);}
    
    button {width: 16.4rem; height: 4.4rem; font-size: 1.6rem;}
}

/* label */
.label {font-size: 1.8rem; font-weight: 600; color: var(--blue800);}
.label.red {color: var(--red);}
.label.blue {color: var(--light-blue);}

@media screen and (max-width: 768px) {
    .label {font-size: 1.6rem;}
}

/* page layout */
.page-title {display: flex; flex-flow: column; row-gap: 3.2rem; margin-bottom: 10rem;}
.page-title > h1 {font-size: 6rem; font-weight: 700;}

.page-tab {display: flex; align-items: center; column-gap: 3.2rem;}
.page-tab > li {font-size: 3.2rem; font-weight: 700; color: var(--gray200); cursor: pointer; position: relative;}
.page-tab > li.active {color: var(--gray700);}
.page-tab > li.active::before {content: ''; width: 100%; height: 2px; background-color: var(--gray700); position: absolute; bottom: -.8rem;}

.page-tab-double {display: flex; align-items: center; column-gap: 3.2rem;}
.page-tab-double > li {font-size: 3.2rem; font-weight: 700; color: var(--gray200); cursor: pointer; position: relative;}
.page-tab-double > li.active {color: var(--gray700);}
.page-tab-double > li.active::before {content: ''; width: 100%; height: 2px; background-color: var(--gray700); position: absolute; bottom: -.8rem;}

.page-banner {height: 28rem;}
.page-banner .img {width: 100vw; min-width: 128rem; height: 28rem; background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; left: 0;}
.page-banner ~ .page-cont, .page-banner ~ .cont-box {margin-top: 16rem;}

.page-cont {display: none;}
.page-cont.active {display: block;}

.page-double-cont {display: none;}
.page-double-cont.active {display: block;}

@media screen and (max-width: 768px) {
    .page-title {row-gap: 2rem; margin-bottom: 3rem;}
    .page-title > h1 {font-size: 2.2rem;}

    .page-tab {display: flex; align-items: center; column-gap: 0;}
    .page-tab > li {display: flex; align-items: center; justify-content: center; height: 4.2rem; text-align: center; font-size: 1.2rem; line-height: 1.2; font-weight: 500; color: var(--gray300); border: 1px solid var(--gray100); border-right: 0; background-color: var(--white); position: relative; word-break: keep-all;}
    .page-tab > li:nth-child(1):nth-last-child(2), .page-tab > li:nth-child(1):nth-last-child(2) ~ li {width: calc(100% / 2);}
    .page-tab > li:nth-child(1):nth-last-child(3), .page-tab > li:nth-child(1):nth-last-child(3) ~ li {width: calc(100% / 3);}
    .page-tab > li:nth-child(1):nth-last-child(4), .page-tab > li:nth-child(1):nth-last-child(4) ~ li {width: calc(100% / 4);}
    .page-tab > li:nth-child(1):nth-last-child(5), .page-tab > li:nth-child(1):nth-last-child(5) ~ li {width: calc(100% / 5);}
    .page-tab > li:last-child {border-right: 1px solid var(--gray100);}
    .page-tab > li + li {border-left: 1px solid var(--gray100);}

    .page-tab > li.active {font-weight: 700; color: #ffffff; background-color: var(--blue700); border-color: var(--blue700);}
    .page-tab > li.active::before {width: 1px; height: calc(100% + .2rem); background-color: var(--blue700); top: -1px; right: -1px; bottom: initial; z-index: 1;}
    .page-tab > li.active + li {border-left-color: var(--blue700);}

    .page-tab-double {display: flex; align-items: center; column-gap: 0;}
    .page-tab-double > li {display: flex; align-items: center; justify-content: center; height: 4.2rem; text-align: center; font-size: 1.2rem; line-height: 1.2; font-weight: 500; color: var(--gray300); border: 1px solid var(--gray100); border-right: 0; background-color: var(--white); position: relative; word-break: keep-all;}
    .page-tab-double > li:nth-child(1):nth-last-child(2), .page-tab-double > li:nth-child(1):nth-last-child(2) ~ li {width: calc(100% / 2);}
    .page-tab-double > li:nth-child(1):nth-last-child(3), .page-tab-double > li:nth-child(1):nth-last-child(3) ~ li {width: calc(100% / 3);}
    .page-tab-double > li:nth-child(1):nth-last-child(4), .page-tab-double > li:nth-child(1):nth-last-child(4) ~ li {width: calc(100% / 4);}
    .page-tab-double > li:last-child {border-right: 1px solid var(--gray100);}
    .page-tab-double > li + li {border-left: 1px solid var(--gray100);}

    .page-tab-double > li.active {font-weight: 700; color: #ffffff; background-color: var(--blue700); border-color: var(--blue700);}
    .page-tab-double > li.active::before {width: 1px; height: calc(100% + .2rem); background-color: var(--blue700); top: -1px; right: -1px; bottom: initial; z-index: 1;}
    .page-tab-double > li.active + li {border-left-color: var(--blue700);}

    .page-banner {height: 14.6rem;}
    .page-banner .img {min-width: auto; height: 14.6rem;}
    .page-banner ~ .page-cont, .page-banner ~ .cont-box {margin-top: 2.6rem;}
}

/* tab */
.tab-title {display: flex; align-items: center; justify-content: space-between; margin-bottom: 6rem;}

.sub-tab {display: flex; align-items: center; column-gap: .8rem; margin-bottom: 2.4rem;}
.sub-tab > li {width: fit-content; height: 4.2rem; display: flex; align-items: center; justify-content: center; column-gap: .4rem; padding: 0 2rem; font-size: 1.8rem; font-weight: 500; color: var(--gray300); cursor: pointer; border: 1px solid var(--gray200); border-radius: 3rem;} 
.sub-tab > li.active {background-color: var(--light-blue); border-color: var(--light-blue); font-weight: 600; color: #ffffff;}

@media screen and (max-width: 768px) {
    .tab-title {flex-flow: column; row-gap: 2.4rem; align-items: initial; margin-bottom: 2rem;}
    
    .sub-tab {column-gap: .4rem; width: 100vw; margin: 0 -2rem 2rem; padding: 0 2rem; overflow-x: auto;}
    .sub-tab > li {height: 3rem; padding: 0 1.2rem; font-size: 1.4rem; white-space: nowrap;}
}

/* cont box */
.page-cont + .cont-box {margin-top: 16rem;}
.cont-box + .cont-box {margin-top: 16rem;}
.box + .box {margin-top: 6rem;}
.cont-box > img {width: 100%;}

@media screen and (max-width: 768px) {
    .page-cont + .cont-box {margin-top:4rem;}
    .cont-box + .cont-box {margin-top: 4rem;}
    .box + .box {margin-top: 2.8rem;}
}

/* title */
.title {margin-bottom: 6rem; display: flex; flex-flow: column; row-gap: 2.4rem;}
.title + p {font-size: 1.8rem; line-height: 1.6; margin-bottom: 10rem;}
.title > h2 {font-size: 4.8rem; font-weight: 700; line-height: 1.4; word-break: keep-all;}
.title > p {font-size: 1.8rem; color: var(--gray300);}

@media screen and (max-width: 768px) {
    .title {margin-bottom: 2rem; row-gap: 1.2rem;}
    .title + p {font-size: 1.5rem; margin-bottom: 4rem;}
    .title > h2 {font-size: 2.2rem;}
    .title > p {font-size: 1.5rem;}
}

.sub-title {margin-bottom: 2rem;}
.sub-title + p {font-size: 1.8rem; line-height: 1.6; margin-bottom: 10rem;}
.sub-title > h2 {font-size: 3.2rem; font-weight: 600; line-height: 1.6;}
.sub-title > h3 {font-size: 2.4rem; font-weight: 600; line-height: 1.6;}

@media screen and (max-width: 768px) {
    .sub-title {margin-bottom: 1.6rem;}
    .title + p {font-size: 1.5rem; margin-bottom: 4rem;}
    .sub-title > h2 {font-size: 2rem;}
    .sub-title > h3 {font-size: 1.8rem; word-break: keep-all;}
}

/* table */
table {width: 100%; border-collapse: collapse; border-spacing: 0; border-top: 1px solid var(--gray700);}
table tr {border-bottom: 1px solid var(--gray100);}
table th {height: 6rem; padding: 2rem; background-color: var(--gray50); text-align: left; font-size: 1.6rem; color: var(--gray300); font-weight: 500; line-height: 1.4; vertical-align: middle; word-break: keep-all;}
table td {height: 6rem; padding: 2rem; font-size: 1.8rem; vertical-align: middle; word-break: keep-all; line-height: 1.4;}
table td.font-navy, table td.font-blue, table td.font-red {font-weight: 600;}
table td input, table td select {width: 45.2rem;}
table td button {width: fit-content; min-width: 12rem; height: 4rem; margin: 0 auto; padding: 0 2rem; border-color: var(--gray200); background-color: var(--white); font-size: 1.6rem; color: var(--gray300);}

table thead th,
table thead + tbody td {text-align: center;}

.table-desc {margin-top: 2rem; font-size: 1.8rem; line-height: 1.6; color: var(--gray300); word-break: keep-all;}

@media screen and (max-width: 768px) {
    table th {height: 4rem; padding: 1.2rem; font-size: 1.3rem;}
    table td {height: 5.2rem; padding: 1.2rem; font-size: 1.3rem;}
    table td input, table td select {width: 100%;}
    table td button {min-width: 8rem; height: 3.2rem; padding: 0 1rem; font-size: 1.3rem;}
    
    .table-desc {margin-top: 1.6rem; font-size: 1.5rem;}
    
    .scroll-table {width: 100vw; margin: 0 -2rem; padding: 0 2rem; overflow-x: auto;}
    .scroll-table table {width: max-content;}
}

/* pagination */
.pagination {display: flex; align-items: center; justify-content: center; column-gap: 1.2rem; margin-top: 6rem;}
.pagination > div {display: flex; align-items: center; justify-content: center;}
.pagination .disabled {cursor: default;}

.pagination .desktop {display: flex; align-items: center; justify-content: center;}
.pagination .desktop > li {width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 500;}
.pagination .desktop > li.active {background-color: var(--blue700); color: #fff; font-weight: 600;}

.pagination .mobile {display: none;}

@media screen and (max-width: 768px) {
    .pagination {column-gap: .4rem; margin-top: 3rem;}
    .pagination i {width: 3.2rem!important; height: 3.2rem!important;}

    .pagination .desktop {display: none;}

    .pagination .mobile {display: flex; align-items: center; justify-content: center; column-gap: .6rem;}
    .pagination .mobile > li {width: 2.6rem; text-align: center; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; column-gap: .6rem;}
    .pagination .mobile > li + li::before {content: '/';}
    .pagination .mobile > li.active {color: var(--blue700); font-weight: 600;}
}

/* popup */
.popup {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 9999;}
.popup .pop-wrap {width: 72rem; background-color: var(--white); padding: 4.8rem 4rem; display: flex; flex-flow: column; row-gap: 4.8rem;}
.popup .pop-wrap .pop-tit {display: flex; align-items: center; justify-content: center; position: relative;}
.popup .pop-wrap .pop-tit > h2 {font-size: 3.2rem; font-weight: 700;}
.popup .pop-wrap .pop-tit > i {position: absolute; right: 0;}
.popup .pop-wrap .pop-cont {height: 50vh; max-height: 56rem; overflow-y: auto;}
.popup .pop-wrap .pop-btn {display: flex; align-items: center; justify-content: center;}

@media screen and (max-width: 768px) {
    .popup .pop-wrap {width: calc(100% - 4rem); padding: 2.4rem 2rem; row-gap: 2.4rem;}
    .popup .pop-wrap .pop-tit > h2 {font-size: 1.8rem; width: 18rem; word-break: keep-all; text-align: center; line-height: 1.4;}
    .popup .pop-wrap .pop-tit > i {width: 2.4rem; height: 2.4rem;}
    .popup .pop-wrap .pop-cont {max-height: 36rem;}
}

/* empty */
.empty {display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 2rem; padding: 5rem 0;}
.empty > p {font-size: 2.4rem; font-weight: 600;}

@media screen and (max-width: 768px) {
    .empty {row-gap: 1.2rem;}
    .empty > i {width: 10rem; height: 10rem;}
    .empty > p {font-size: 1.8rem;}
}