:root {
    --font-normal: 'Pretendard', sans-serif;
    --font-serif: 'NotoSerif', serif;
    --color-primary: #0057FF;
    --color-secondary: #40609D;
    --color-sub-01: #F0F7FF;
    
    
    --layout-padding: 0;
    --color-border: #ddd;
}


@media all and (max-width:1240px) {
    :root {
        --layout-padding: 20px;
    }
}

@media all and (max-width:768px) {
    :root {
        --layout-padding: 16px;
    }
}


@font-face {
    font-family: 'Pretendard';
    src: url('/_wavedream/font/Pretendard/woff-subset/Pretendard-Thin.subset.woff') format('woff'), url('/_wavedream/font/Pretendard/woff2-subset/Pretendard-Thin.subset.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/_wavedream/font/Pretendard/woff-subset/Pretendard-ExtraLight.subset.woff') format('woff'), url('/_wavedream/font/Pretendard/woff2-subset/Pretendard-ExtraLight.subset.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/_wavedream/font/Pretendard/woff-subset/Pretendard-Light.subset.woff') format('woff'), url('/_wavedream/font/Pretendard/woff2-subset/Pretendard-Light.subset.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/_wavedream/font/Pretendard/woff-subset/Pretendard-Regular.subset.woff') format('woff'), url('/_wavedream/font/Pretendard/woff2-subset/Pretendard-Regular.subset.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/_wavedream/font/Pretendard/woff-subset/Pretendard-Medium.subset.woff') format('woff'), url('/_wavedream/font/Pretendard/woff2-subset/Pretendard-Medium.subset.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/_wavedream/font/Pretendard/woff-subset/Pretendard-SemiBold.subset.woff') format('woff'), url('/_wavedream/font/Pretendard/woff2-subset/Pretendard-SemiBold.subset.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/_wavedream/font/Pretendard/woff-subset/Pretendard-Bold.subset.woff') format('woff'), url('/_wavedream/font/Pretendard/woff2-subset/Pretendard-Bold.subset.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src:  url('/_wavedream/font/Pretendard/woff-subset/Pretendard-ExtraBold.subset.woff') format('woff'),url('/_wavedream/font/Pretendard/woff2-subset/Pretendard-ExtraBold.subset.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/_wavedream/font/Pretendard/woff-subset/Pretendard-Black.subset.woff') format('woff'), url('/_wavedream/font/Pretendard/woff2-subset/Pretendard-Black.subset.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}



@font-face {
    font-family: 'NotoSerif';
    src: url('/_wavedream/font/NotoSerif/NotoSerifKR-ExtraLight.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'NotoSerif';
    src: url('/_wavedream/font/NotoSerif/NotoSerifKR-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'NotoSerif';
    src: url('/_wavedream/font/NotoSerif/NotoSerifKR-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'NotoSerif';
    src: url('/_wavedream/font/NotoSerif/NotoSerifKR-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'NotoSerif';
    src: url('/_wavedream/font/NotoSerif/NotoSerifKR-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'NotoSerif';
    src: url('/_wavedream/font/NotoSerif/NotoSerifKR-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'NotoSerif';
    src: url('/_wavedream/font/NotoSerif/NotoSerifKR-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'NotoSerif';
    src: url('/_wavedream/font/NotoSerif/NotoSerifKR-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}




/* 
======= 전체 페이지에 적용 될 CSS =======
*/
body.hold {overflow: hidden;}
body.loading {opacity: 0; overflow: hidden;}

input[type="number"], input[type="text"], input[type="button"], input[type="password"], input[type="email"],input[type="date"], textarea {width: 100%;border: 1px solid var(--color-border); border-radius: 5px;font-size: 14px;}
input[type="number"], input[type="text"], input[type="button"], input[type="password"], input[type="email"], input[type="date"] {height: 35px;padding: 0 8px;}
input[type="number"]::placeholder, 
input[type="text"]::placeholder, 
input[type="password"]::placeholder, 
input[type="email"]::placeholder,
input[type="date"]::placeholder,
textarea::placeholder {font-size: 13px;}
input[type="submit"] {border: 0;padding: 0 0;}
input[type="radio"] {}
input[type="radio"]:checked {}
input[type="checkbox"] {width: 18px;height: 18px; border: 1px solid var(--color-border); border-radius: 5px;}
input[type="checkbox"]:checked {background: var(--color-primary) url(../images/common/icon_check_w.svg) no-repeat center center / cover;}
input[type="number"] {-moz-appearance: textfield;}
input::-webkit-inner-spin-button {-webkit-appearance: none;}
input::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;}
input:disabled,
textarea:disabled {background-color: #f7f7f7;color: #777;}
input[readonly],
textarea[readonly] {background-color: #f7f7f7;color: #777;}
select {width: 100%;height: 35px;padding: 0 8px;border: 1px solid var(--color-border); border-radius: 5px; font-size: 14px;}
textarea {padding: 8px 8px;height: 110px;}
label {font-size: 14px; font-weight: 500;}
fieldset {margin: 0;border: 0;padding: 0;}
/*ios대응*/
input{appearance: none;-webkit-appearance: none;-webkit-border-radius: 0;background: #fff; color: #1a1a1a;}
select{background: #fff;color: #1a1a1a;}

h1, h2, h3, h4, h5, h6 {font-size:inherit;font-family:var(--font-normal);}



.display-pc {}
.display-mo {display: none;}
.sound_only {display: none;}
.msg_sound_only {display: none;}
.displaynone {display: none !important;}

.popup__notice {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);width: max-content;max-width: 90%; padding: 12px 30px;border-radius: 7px;background: #ffbbbb; text-align: center;font-size: 16px;font-weight: 500;color: #000;opacity: 0;visibility: hidden;transition: .4s;z-index: 10;}
.popup__notice.on {opacity: 1;visibility: visible;}


.page {padding: 60px 0; min-height: 80vh;}

.section-wrap {width: 100%;max-width: 1200px;margin: 0 auto;padding-left: var(--layout-padding);padding-right: var(--layout-padding);}
.section-wrap--small {max-width: 900px;}
.section-wrap--min {max-width: 500px;}


.page-title {margin-bottom: 50px;}
.page-title > h2 {font-size: 50px;font-weight: 700;}
.page-title .warning {font-size: 16px;font-weight: 500;color: #ff0000;}
.page-empty {padding: 50px 0 100px;text-align: center;}
.page-empty .icon {display: block;width: 50px;margin: 0 auto 20px;}
.page-empty .icon > svg {stroke: #f00;}
.page-empty > h3 {margin-bottom: 20px;font-size: 30px;font-weight: 700;}
.page-empty > p {font-size: 20px;color: #777;}


.scroll-top {position: fixed;bottom: 50px;right: 20px;width: 52px;line-height: 50px;border-radius: 50%;border: 1px solid var(--color-border);text-align: center;background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px); opacity: 0;visibility: hidden;transition: .4s;z-index: 10;cursor: pointer;}
.scroll-top.on {opacity: 1;visibility: visible;}
.scroll-top > svg {width: 25px;vertical-align: middle;stroke: var(--color-primary);transform: translateY(-1px);}




/* form 디자인 */
.form-item {display: flex;margin-bottom: 15px;}
.form-item__title {width: 102px;padding: 10px 0;font-size: 14px;font-weight: 500;}
.form-item__cont {width: calc(100% - 102px);}
.form-item__cont-help {margin-top: 8px;font-size: 13px;color: #777;}
.form-item__input--flex {display: flex;flex-flow: row wrap;gap: 5px;}
.form-item__input input[type="number"],
.form-item__input input[type="text"], 
.form-item__input input[type="button"], 
.form-item__input input[type="email"], 
.form-item__input input[type="password"], 
.form-item__input input[type="radio"] {width: 100%;padding: 0 8px;font-size: 14px;}

.form-item__input.notice-error input[type="number"], 
.form-item__input.notice-error input[type="text"] {border-color: #f00;}
.form-item__input select {width: 100%;height: 40px;padding: 0 10px;font-size: 14px;}
.form-item__input textarea {width: 100%;height: 110px;padding: 10px 10px;font-size: 14px;}
.form-item__input .radio-box {display: block;position: relative;cursor: pointer;}
.form-item__input .radio-box input[type="radio"] {cursor: pointer;}
.form-item__input .radio-box .radio-label {display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;text-align: center;font-size: 16px;font-weight: 500;}
.form-item__input .radio-box input[type="radio"]:checked + .radio-label {color: #fff;}
.input-button {width: 107px !important; height: 40px; text-align: center; background: #eee; border-radius: 5px;border: 1px solid var(--color-border);font-size: 13px !important;cursor: pointer;}
.form-item__input-notice {display: flex; align-items: center;margin-top: 8px;font-size: 12px;}
.form-item__input-notice-normal {color: #777;}
.form-item__input-notice-error {margin-left: auto;}
.form-item__input-notice-error .red {color: #f00;}
.form-item__input-notice-error .blue {color: #00f;}
.form-item.essential .form-item__title::after {content: "*";color: #f00;padding-left: 3px;}
.form-button {margin-top: 55px;}
.form-button .submit-button-notice {display: block;margin-top: 10px;text-align: center;font-size: 12px; color: #777;}



table {width: 100%;border-collapse: collapse;}
table th,
table td {padding: 8px;font-size: 13px;border: 1px solid var(--color-border);}
table th {background: #f8f8f8;}
table td {}
table td .help {font-size: 12px;color: #777;margin-top: 8px;}


body .btn {display: block;width: max-content; min-width: 45px;padding: 8px 16px; border-radius: 5px; font-size: 14px; text-align: center;line-height: 1; transition: .4s;cursor: pointer;}
body .btn--normal {background: #333;color: #fff;}
body .btn--cancel {background: #df1313;color: #fff;}
body .btn--small {padding: 5px 10px;font-size: 12px;}
body .btn--big {padding: 12px 20px;font-size: 16px;font-weight: 500;}
body .btn--w100 {width: 100%;}
body .btn--w120px {min-width: 120px;}
body .btn--gray {background: #ddd;}
body .btn--primary {background: var(--color-primary);color: #fff;}
body .btn--green {background: #06d12b;color: #fff;}
body .btn[disabled] {opacity: .5;cursor: not-allowed;}

.pagination {display: flex;justify-content: center;align-items: center;gap: 5px;font-size: 14px;}
.pagination > a {display: inline-block;}
.pagination .paging-btn > svg {width: 15px;vertical-align: middle;transform: translateY(-1px);color: #777;}
.pagination > span {position: relative;padding: 0 5px;}
.pagination > span.current {color: #1a1a1a;}
.pagination > span.current:after {content: "";display: block; position: absolute;bottom: -3px;left: 50%;transform: translateX(-50%);;width: 100%;height: 1px;background: #aaa;}
.pagination > a:not(.paging-btn) {padding: 0 5px;color: #aaa;}




.popup-mask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);opacity: 0;visibility: hidden;z-index: 9999;transition: .4s;}
.popup-mask.on {opacity: 1;visibility: visible;}
.layer-popup {position: fixed;top: calc(50% + 20px);left: 50%;transform: translate(-50%, -50%);width: 90%;max-width: 600px; padding: 20px;border-radius: 10px;background: #fff;box-shadow: 0 0 5px rgba(0,0,0,.2);overflow: hidden;opacity: 0;visibility: hidden;transition: .7s;z-index: 10000;}
.layer-popup.on {top: 50%;opacity: 1;visibility: visible;}
.layer-popup__close {position: absolute;top: 17px;right: 15px;cursor: pointer;}
.layer-popup__close > svg {width: 30px;vertical-align: middle;}
.layer-popup__title {margin-bottom: 15px;;font-size: 21px;font-weight: 700;}
.layer-popup__content {text-align: center;}
.layer-popup__content-btns {display: flex;gap: 10px;justify-content: center;margin-top: 20px;}
.layer-popup.alert-popup {max-width: 350px;}
.layer-popup__content-todayhide {margin-top: 15px;}

.layer-popup--login {max-width: 400px;}
.layer-popup--login .form-item {display: block;}
.layer-popup--login .form-item__title {width: 100%;}
.layer-popup--login .form-item__input {width: 100%;}
.layer-popup--login .form-button {margin-top: 30px;}
.layer-popup--login .form-button > button {padding: 13px 20px;}
.layer-popup--login .form-button .find-id-pw {display: block;width: max-content;margin: 20px auto 0;border-bottom: 1px solid #777;color: #555; font-size: 14px;cursor: pointer;}
.layer-popup--findId {max-width: 400px;}
.layer-popup--findId iframe {width: 100%;height: 200px;}




@media all and (min-width:1025px) {
    body .btn--normal:not([disabled]):hover {background: #555;}
    body .btn--cancel:not([disabled]):hover {background: #c21818;}
    body .btn--gray:not([disabled]):hover {background: #ccc;}
    body .btn--primary:not([disabled]):hover {background: #40609D;}

    .scroll-top:hover {background: #fff; box-shadow: 2px 2px 4px rgba(0,0,0,.1);}

}


@media all and (max-width:1024px) {
    .display-pc {display: none;}
    .display-mo {display: block;}


    .page-title {display: none;}
    .scroll-top {bottom: 85px;right: 10px;width: 42px;line-height: 40px;box-shadow: 1px 1px 2px rgba(0,0,0,.1);}
    .scroll-top > svg {width: 20px;}
}

@media all and (max-width:768px) {
    
    .input-button {width: 90px !important;font-size: 13px !important;}
    
    .layer-popup__title {font-size: 18px;}
    .layer-popup__close > svg {width: 24px;}
    .popup__notice {padding: 10px 20px; border-radius: 5px;font-size: 14px;}


    body .btn {padding: 8px 10px;}
    body .btn--big {padding: 10px 20px; font-size: 14px;}

    .form-item__title {width: 90px;font-size: 14px;}
    .form-item__input .radio-box .radio-label {font-size: 14px;}

    .layer-popup--login,
    .layer-popup--findId {padding: 40px 20px 20px;border-radius: 10px;}
    .layer-popup--login .form-button .find-id-pw {font-size: 15px;}

    .page {padding: 30px 0;}
    
    .page-title {margin-bottom: 40px;}
    .page-title > h2 {font-size: 25px;}

    .page-empty .icon {width: 35px;margin-bottom: 10px;}
    .page-empty > h3 {margin-bottom: 13px;font-size: 24px;}
    .page-empty > p {font-size: 16px;}
}