@charset "utf-8";

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

/* reset */
html {box-sizing: border-box; overflow-y: scroll; -webkit-txt-size-adjust: 100%; font-family: 'Pretendard' !important; color: #1c1917; background: #fff; height: 100%; font-size: 14px; letter-spacing: -1px;}
select {font-family: 'Pretendard' !important;}
body {font-family: 'Pretendard' !important;}
html, body {height: 100%; background: #fff; font-weight: 600; color: #1e1d1d; scroll-behavior: smooth; overflow-y: auto;}
.no-scroll {height: 100vh; overflow: hidden;}
*, :after, :before {background-repeat: no-repeat; box-sizing: inherit; margin: 0; padding: 0;}
:after, :before {text-decoration: inherit; vertical-align: inherit;}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {display: block;}
button {border:0; background: none; outline: none; cursor: pointer;}
li {list-style: none;}
/* component */
.skip {display: block; height: 1px; width: 1px; margin: 0 -1px -1px 0; overflow: hidden; font-size: 0; line-height: 0; text-align: center;}
.skip:hover, .skip:active, .skip:focus{width:100%; height:auto; padding:15px 0; text-indent:10px; font-weight:bold; font-size:14px; color:#333;}
.sr-only {position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; border: 0;}
.feather {width: 26px; height: 26px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;}
.center {position: absolute !important; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.center-v {position: absolute !important; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.center-h {position: absolute !important; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.truncate {text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.flip-x {-webkit-transform: scaleX(-1); transform: scaleX(-1);}
.flip-y {-webkit-transform: scaleY(-1); transform: scaleY(-1);}
.flip-90 {-webkit-transform: rotate(-90deg); transform: rotate(-90deg);}
.align-left {text-align: left;}
.align-center {text-align: center;}
.align-right {text-align: right;}
.circle {border-radius: 50%;}
.responsive {overflow-x: auto; position: relative;}
.responsive table {width: 768px !important; word-break: keep-all;}
.tab-menu {text-align: center;}
.tab-menu li {border: 1px solid #d7d7d7; margin: -1px 0 0 -1px; position: relative; z-index: 1; padding: 15px 0; flex: 0 calc(100% / 4); width: calc(100% / 4);}
.tab-menu li.active {border: 1px solid #000; position: relative; z-index: 10; background: #000; color: #fff;}
.txt-shadow {text-shadow: 1px 1px 6px #000;}
.z-depth-0 {box-shadow: none !important;}
.z-depth-1 {box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);}
.z-depth-2 {box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);}
.z-depth-3 {box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);}
.z-depth-4 {box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);}
.z-depth-5 {box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);}
.hover-zoom img {-webkit-transform: scale(1); transform: scale(1); -webkit-transition: .4s; transition: .4s;}
.hover-zoom:hover img, .hover-zoom:focus img {-webkit-transform: scale(1.1);transform: scale(1.1); -webkit-transition: .6s; transition: .6s;}
.scroll-line {position: fixed; left: 0; top: 0; height: 3px; background: #ffcc00; width: 0; z-index: 9000;}
.modal {position: relative; z-index: -1; display: none;}
#toast {position: fixed; font-size: 1rem; right: 10px; bottom: 10px; z-index: 9000;}
.toast .wrap {background: #6f32be; color: #fff; border-radius: 5px; display: inline-flex; font-weight: wrap; padding: 10px 3px 13px 10px; min-width: 180px; position: relative; overflow: hidden; }
.toast .wrap:after {content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: #fff; opacity: 0.6;}
.toast.no-time .wrap {padding: 10px 3px 10px 10px;}
.toast.no-time .wrap:after {display: none;}
.toast.error .wrap {background: #be123c;}
.toast.info .wrap {background: #4d7c0f;}
.toast:not(:last-child) {margin-bottom: 3px;}
.toast .wrap > svg {width: 20px; height: 20px; margin: 2px 5px 0 0; stroke: #fff;}
.toast .btn-close {width: 20px; height: 20px; margin: 2px 0 0 auto;}
.toast .btn-close svg {width: 100%; height: 100%; stroke: #fff;}
.toast .progress-bar {position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: #fff;; opacity: 1; animation: progress; animation-duration: 3s;}
#overlay {background: rgba(0, 0, 0, .7); width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; z-index: 9000; display: none;}
#overlay.active {display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
#overlay .modal {z-index: 9999; display: block;}
/* sect.dialog.z-depth-4>(h2.dialog-tiltle{알림창}+(article>h3.dialog-title{부제목})+.btns>(btn.btn-cancel{취소}+btn.btn-confirm.z-depth-4{확인})) */
.dialog {border-radius: 20px; background: #fff; padding: 15px; display: inline-grid; grid-template-columns: repeat(3, 1fr); -ms-grid-rows: 36px 1fr 36px; grid-template-rows: 36px 1fr 36px; grid-template-areas: "header header header" "content content content" ". . btns";}
.dialog > .dialog-title {font-weight: 500; font-size: 1.5rem; grid-area: header;}
.dialog > article {grid-area: contents; font-size: 1rem; grid-area: content; margin-bottom: 10px;}
.dialog > article .dialog-title {font-size: 1.2rem; font-weight: 500; margin-bottom: 5px;}
.dialog .btns {grid-area: btns; -ms-grid-column-align: end; justify-self: end;}
.dialog .btn-cancel {text-align: center; padding: 5px 12px; margin-left: auto;}
.dialog .btn-confirm {background: #1b1c34; text-align: center; color: #fff; border-radius: 5px; padding: 5px 12px;}
.dialog .btn-confirm svg {width: 20px; height: 20px; position: relative; top: 3px;}
.absolute-fix {position: relative; visibility: hidden; width: 100%; top: 0; left: 0;}
.absolute-fix img {width: 100%; height: auto;}
.hide-on-small {display: none !important;}
.clf:after {content: ''; display: block; clear: both;}
.flex {display: flex; flex-wrap: wrap;}
.flex-col {display: flex; flex-wrap: wrap; flex-direction: column;}
.flex-center {display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.spinner-bg {display: none;}
.spinner-bg.active {position: fixed; display: block; width: 100%; height: 100vh; background: #fff; opacity: .2; left: 0; top: 0; z-index: 200;}
.spinner-windmill {display: none;}
.spinner-windmill.active {width:10px; height:10px; border-radius:5px; background-color:#6f28cd; transform-origin:5px 15px; animation:dotWindmill 2s infinite linear; z-index: 300; display: block; position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0.8;}
.spinner-windmill::before,.spinner-windmill::after {content:''; display:inline-block; position:absolute;}
.spinner-windmill::before {left:-8.66px; top:15px; width:10px; height:10px; border-radius:5px; background-color:#fc0;}
.spinner-windmill::after {left:8.66px; top:15px; width:10px; height:10px; border-radius:5px; background-color:#a3cd1f;}
@keyframes dotWindmill {0% {transform: rotateZ(0deg) translate3d(0, 0, 0);} 100% {transform: rotateZ(720deg) translate3d(0, 0, 0);}}

@media (max-width: 320px) {
    .dialog .btn-cancel, .dialog .btn-confirm {padding: 5px 10px;}
}
@media (min-width: 768px) {
    .hide-on-small {display: block !important;}
    .hide-on-medium {display: none !important;}
    .responsive table {width: 100% !important;}
    .dialog {width: 400px;}
}
@media (min-width: 992px) {
    .hide-on-medium {display: block !important;}
    .hide-on-laptop {display: none !important;}
}
@media (min-width: 1200px) {
    .hide-on-laptop {display: block !important;}
    .hide-on-large {display: none !important;}
}

/* ie only */
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
    .flex > * {flex: 0 auto;}
}

@keyframes progress {
    0% {width: 100%;}
    100% {width: 0;}
}