@charset "UTF-8";


body {  margin: 0 auto; width: 100%; max-width: 100%; min-width: 1600px; height: 100%; max-height: 100%;
	font-family:  var( --font-family-pretendard ), "Malgun Gothic"; font-size: 14px; letter-spacing: 0.6px; background: var( --color-of-white ); color: var( --default-font-color ); scroll-behavior: smooth; }

/* paging */
div.wrap-content div.contents section.paging { position: relative; display: flex; margin: 0; justify-content: center; }
div.wrap-content div.contents section.paging > button { margin: 0 0.6rem; padding: 0; width: 3rem; height: 3rem; font-size: 1.2rem; border: 1px solid var( --color-of-soft-border ); border-radius: 3rem;
	background-color: var( --color-of-white ); color: var( --color-of-gray ); }
div.wrap-content div.contents section.paging > button.number {}
div.wrap-content div.contents section.paging > button.arrow { background-repeat: no-repeat; background-size: 30% 30%; background-position: 50% center; }
div.wrap-content div.contents section.paging > button.first { background-image: var( --first-page-url ); }
div.wrap-content div.contents section.paging > button.prev { background-image: var( --prev-page-url ); background-size: 20% 30%; }
div.wrap-content div.contents section.paging > button.next { background-image: var( --next-page-url ); background-size: 20% 30%; }
div.wrap-content div.contents section.paging > button.last { background-image: var( --last-page-url ); }
div.wrap-content div.contents section.paging > button:disabled { background-color: var( --color-of-disabled-background ); opacity: 0.3; }
div.wrap-content div.contents section.paging > button:not(:disabled):hover { border-color: var( --color-of-theme-border ); }
div.wrap-content div.contents section.paging > button.on { font-weight: var( --font-weight-bold ); border: none; color: var( --color-of-theme ) !important; text-decoration: underline; }

/* image-viewer popup */
div#image-viewer-content-popup div.content { padding: 2rem; }
div#image-viewer-content-popup div.content > div.head { padding: 0; height: 30px}
div#image-viewer-content-popup div.content > div.head p { height: 2rem; text-align: left; text-indent: 1rem;  }
div#image-viewer-content-popup div.content > div.head p span.title { font-size: 1.6rem; }
div#image-viewer-content-popup div.content > div.head p span.subtitle { font-size: 1.4rem; color: var( --color-of-gray ); }
div#image-viewer-content-popup div.content > div.head button.dim-close { background-image: var( --simple-close-url ); background-repeat: no-repeat; background-size: contain; top: 0.5rem}
div#image-viewer-content-popup div.content > div.body { position: relative; margin-top: 1rem; padding: 1rem 0; height: fit-content; border-top: 1px solid var( --color-of-soft-border ); }
div#image-viewer-content-popup div.content > div.body div#viewer-list { width: 100%; height: 600px; overflow: hidden; white-space: nowrap; }
div#image-viewer-content-popup div.content > div.body div#viewer-list div.viewer { position: relative; display: inline-block; width: 1160px; height: 600px; text-align: center; vertical-align: top; opacity: 0; }
div#image-viewer-content-popup div.content > div.body div#viewer-list div.viewer._dark { background-color: var( --color-of-bg ); }
div#image-viewer-content-popup div.content > div.body div#viewer-list div.viewer img { position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: 100%; transform: translate( -50%, -50% ); }
div#image-viewer-content-popup div.content > div.body div#viewer-list div.viewer iframe { position: absolute; top: 50%; left: 50%; width: 80%; height: 80%; transform: translate( -50%, -50% ); border-radius: 2rem; }
div#image-viewer-content-popup div.content > div.body div#viewer-list div.viewer div.down { position: absolute; top: 50%; left: 50%; width: fit-content; transform: translate( -50%, -50% ); background: none; }
div#image-viewer-content-popup div.content > div.body div#viewer-list div.viewer div.down p { padding: 1rem 0; font-size: 1.6rem; color: var( --color-of-gray ); }
div#image-viewer-content-popup div.content > div.body div#viewer-list div.viewer div.down p.file-nm { font-size: 1.4rem; color: var( --color-of-light-gray ); }
div#image-viewer-content-popup div.content > div.body div#viewer-list div.viewer div.down p button { border-color: var( --color-of-theme ); background-color: var( --color-of-white ); color: var( --color-of-theme ); }
div#image-viewer-content-popup div.content > div.body > button { position: absolute; top: 50%; transform: translateY( -50% ); padding: 0; width: 10rem; height: 10rem; border: none; border-radius: 10rem;
	background-position: center; background-repeat: no-repeat; background-color: rgba( 155, 155, 155, 0.2 ); }
div#image-viewer-content-popup div.content > div.body > button.move-left { left: 0rem; background-image: var( --prev-page-url ); }
div#image-viewer-content-popup div.content > div.body > button.move-right { right: 0rem; background-image: var( --next-page-url ); }
div#image-viewer-content-popup div.content > div.body > button:not(:disabled):hover { background-color: rgba( 155, 155, 155, 0.65 ); }
div#image-viewer-content-popup div.content > div.body > button:disabled { opacity: 0.25; }

/* 알림 */
div.user-if > div > div#my-alim { position: absolute; bottom: -1rem; right: 0; width: 50rem; transform: translateY( 100% ); padding: 2rem 0; background-color: var( --color-of-white ); border: 1px solid var( --color-of-light-gray ); border-radius: 2rem; }
div.user-if > div > div#my-alim > div.head { position: relative; }
div.user-if > div > div#my-alim > div.head p { padding: 0 2rem; font-size: 2.2rem; text-align: left; color: var( --default-font-color ); }
div.user-if > div > div#my-alim > div.head button.dim-close { position: absolute; right: 2rem; top: 50%; padding: 0; width: 2rem; height: 2rem; background: none; border: none; transform: translateY(-50%);
	background-image: var( --simple-close-url ); background-repeat: no-repeat; background-size: contain; }
div.user-if > div > div#my-alim > p { margin-top: 2rem; padding: 0 2rem; text-align: left; color: var( --default-font-color ); }
div.user-if > div > div#my-alim > p span { color: var( --color-of-theme ); }
div.user-if > div > div#my-alim > p button { float: right; padding: 0 0 0.2rem 0; font-size: 1.2rem; color: var( --color-of-theme ); border: none; background: none; border-radius: 0; border-bottom: 1px solid var( --color-of-theme ); }
div.user-if > div > div#my-alim > p button:disabled { color: var( --color-of-disabled ); border-color: var( --color-of-soft-border ); }
div.user-if > div > div#my-alim div#my-alim-body { padding: 0; min-height: 160px; max-height: 400px;  }
div.user-if > div > div#my-alim div#my-alim-body p { align-items: center; margin: 0 auto; padding: 1.2rem 0.5rem; width: calc( 100% - 2rem ); font-size: 1.4rem; text-align: left; color: var( --color-of-gray ); border-bottom: 1px solid var( --color-of-soft-border ); }
div.user-if > div > div#my-alim div#my-alim-body p.empty { padding: 6rem 0; text-align: center; font-size: 1.6rem; color: var( --color-of-disabled ); }
div.user-if > div > div#my-alim div#my-alim-body p:not(.empty) {  display: flex; cursor: pointer; }
div.user-if > div > div#my-alim div#my-alim-body p span { display: inline-block; }
div.user-if > div > div#my-alim div#my-alim-body p span.dscr { width: 80%; text-align: left; color: var( --color-of-dark-gray ); }
div.user-if > div > div#my-alim div#my-alim-body p span.dscr i { display: inline-block; margin-left: 0.4rem; width: 0.7rem; height: 0.6rem; vertical-align: top; border-radius: 0.3rem; background-color: var( --color-of-notice ); }
div.user-if > div > div#my-alim div#my-alim-body p span.date { width: 20%; text-align: right; color: var( --color-of-light-gray ); }
div.user-if > div > div#my-alim div#my-alim-body p:last-child { border-bottom: none; }
div.user-if > div > div#my-alim div#my-alim-body p:hover { background-color: var( --color-of-soft-theme ); }
div.user-if > div > div#my-alim div.scroll-wrapper { margin-top: 2rem; padding: 0 0.6rem; width: 100%; border-top: 1px solid var( --color-of-default-border ); }