@charset "utf-8";

#wrap {
  height: auto;
  padding-bottom: 10px;
}
#print-page {
  display: inline-block;
  padding: 16px 16px 24px 16px;
  width: 637px;
  height: 833px;
  font-family: "Noto Serif KR", serif;
}
.print-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.print-title h1 {
  font-size: 16px;
  font-weight: 700;
  color: #111;
}
.print-page {
  display: flex;
  align-items: center;
}
.print-wrap img {
  width: 100%;
}
.print-wrap {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  width: 600px;
  height: 800px;
  margin: 0 auto;
  padding: 20pt 20pt 15pt;
  box-sizing: border-box;
  border: 2px solid #000;
  font-family: "맑은 고딕", "돋움", Dotum, "굴림", Gulim, Sans-serif;
  color: #000;
}
/* .print-wrap:after{content:''; opacity:0.10; display:block; position:absolute; top:50%; left:50%; z-index:-1; width:250pt; height:250pt; background:url(/ko_admin/images/print/print_logo.svg) no-repeat 50% 50%; transform:translate(-50%, -50%);z-index: 1;} */
.print-wrap .logo-gov {
  display: block;
  width: 25mm;
  position: absolute;
  right: 15pt;
  top: 20pt;
}
.print-wrap .cover-background {
  opacity: 0.1;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250pt;
  height: 250pt;
  transform: translate(-50%, -50%);
  z-index: 1;
}
/* .print-wrap .cover-background{opacity: 0.10;
    position: absolute;
    top: 24%;
    left: 24%;
    width: 100px;
    height: 100px;
    z-index: 1;} */
.print-view__title {
  padding-top: 15pt;
  font-size: 22pt;
  text-align: center;
}
.print-view__conts {
  padding: 50pt 20pt 20pt;
  font-size: 14pt;
  height: 260px;
}
.print-view__conts ul {
  display: flex;
  flex-direction: column;
  gap: 15pt;
}
.print-view__conts ul > li {
  display: flex;
  gap: 0 20pt;
}
.print-view__conts ul > li em {
  flex: 0 1 80pt;
  line-height: 0.5cap;
  text-align: justify;
}
.print-view__conts ul > li em:before,
.print-view__conts ul > li em:after {
  content: "";
  display: inline-block;
  width: 100%;
  line-height: 0;
}
.print-view__conts ul > li span {
  flex: 1;
  font-weight: 600;
  word-break: keep-all;
}
.print-view__conts table {
  margin-top: 20pt;
  border-top: unset;
  border: 2pt solid black;
}
.print-view__conts table th {
  font-weight: 600;
}
.print-view__conts table td,
.print-view__conts table th {
  border: 1pt solid black;
  font-size: 10pt;
  line-height: 160%;
  text-align: center;
}
.print-view__conts table th:nth-child(4n),
.print-view__conts table td:nth-child(4n) {
  border-right-width: 2pt;
}
.print-view__explain {
  font-size: 14pt;
  font-weight: 600;
  text-align: justify;
  line-height: 190%;
}
.print-view__date {
  padding: 30pt 20pt 20pt;
  text-align: right;
  font-size: 14pt;
  font-weight: 600;
}
.print-view__stamp {
  position: relative;
  padding-top: 20pt;
  text-align: center;
  font-weight: 600;
  line-height: 190%;
  z-index: 1;
}
.print-view__stamp strong {
  display: block;
  font-size: 21pt;
  line-height: 120%;
}
.print-view__stamp strong i {
  display: block;
  font-size: 13pt;
}
.print-view__stamp .logo {
  display: block;
  position: absolute;
  left: 50%;
  top: 18%;
  width: 22mm;
  transform: translateX(-300%);
}
.print-view__stamp .stamp {
  opacity: 0.8;
  display: block;
  position: absolute;
  right: 50%;
  top: 10%;
  z-index: -1;
  width: 92px;
  transform: translateX(220%);
}
/* 단체 */
/* .print-page.a4{} */
.print-page.a4 .print-wrap {
  width: auto;
  height: auto;
  padding-left: 20pt;
  padding-right: 20pt;
}
.print-page.a4 .print-wrap:after {
  display: none;
}
.print-page.a4 .print-view__conts {
  padding: 30pt 0 20pt;
}
.print-page.a4 .print-view__conts ul {
  gap: 5pt;
  font-size: 11pt;
}
.print-page.a4 .print-view__conts ul > li {
  line-height: 160%;
}
.print-page.a4 .print-view__conts ul > li em {
  flex: 0 1 60pt;
  font-weight: 600;
  text-align: left;
}
.print-page.a4 .print-view__date {
  text-align: center;
}
.print-page.a4 .print-view__explain {
  padding-top: 0;
  text-align: center;
}
.print-page.a4 .print-view__stamp strong {
  padding-bottom: 10pt;
}

/* --- */
.certificate-group {
  display: flex;
  gap: 20px;
  justify-content: center;
}

/* Certificate Ver01 */
div#print-page-v1 {
  display: flex !important;
  font-family: "Nanum Myeongjo", serif;
  width: 604px;
  height: 855px;
  aspect-ratio: 297 / 210;
  transform-origin: top center;
}
#print-page {
  border: 1px solid #eee;
}
.certificate-ver01 .certificate-wrap {
  display: flex;
  flex-direction: column;
  padding: 40px 60px;
}
.certificate-ver01 .certificate-wrap .head-letter {
  display: flex;
  justify-content: space-between;
}
.certificate-ver01 .certificate-wrap .head-letter img {
  width: 100%;
  max-width: 180px;
}
.certificate-ver01 .certificate-wrap .head-letter .cer-number {
  font-size: 16px;
  font-weight: 800;
}
.certificate-ver01 .certificate-wrap .head-title {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  padding: 50px 0;
}
.certificate-ver01 .certificate-wrap .details-cer {
  position: relative;
  font-size: 19px;
  font-weight: 700;
  height: 360px;
}
.certificate-ver01 .certificate-wrap .details-cer img {
  width: 400px;
  opacity: 0.1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.certificate-ver01 .certificate-wrap .details-cer .data {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  line-height: 2.5em;
}
.certificate-ver01 .certificate-wrap .details-cer .data li {
  display: flex;
  gap: 20px;
}
.certificate-ver01 .certificate-wrap .details-cer .data p {
  width: 80px;
}
.certificate-ver01 .certificate-wrap .details-cer .parag {
  line-height: 2.3em;
}
.certificate-ver01 .certificate-wrap .date-cer {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.certificate-ver01 .certificate-wrap .footer-cer {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  height: 80px;
  padding-top: 60px;
  position: relative;
}
.certificate-ver01 .certificate-wrap .footer-cer img {
  position: absolute;
  width: 120px;
  right: 0;
  top: 30px;
  z-index: 0;
  opacity: 0.6;
}

/* --- */
/* Certificate Ver02 */
.preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.preview-modal-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  scale: 0.9;
}
.preview-modal-content > .header-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-title > .wrap-title-btn {
  display: flex;
  align-items: center;
  gap: 12px;
}
.preview-close {
  line-height: 100%;
}
.preview-close > i {
  font-size: 24px;
  cursor: pointer;
}
#previewArea {
  display: flex;
}
div#print-page-v2 {
  display: flex !important;
  font-family: "Nanum Myeongjo", serif;
  width: 604px;
  height: 855px;
  aspect-ratio: 297 / 210;
  transform-origin: top center;
}
#print-page {
  border: 1px solid #eee;
}
/* .certificate-ver02 .certificate-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 50px;
  padding-bottom: 80px;
  border: 2px solid #c69e61;
  margin: 20px;
  height: -webkit-fill-available;
}
.certificate-ver02 .certificate-wrap::before {
  content: "";
  display: block;
  position: absolute;
  width: 98%;
  height: 98.5%;
  border: 1px solid #c69e61;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} */
.certificate-ver02 .certificate-wrap {
  position: relative;
  padding: 50px 50px 80px;
  border: 2px solid #c69e61;
  margin: 20px;
}

.certificate-ver02 .certificate-wrap::before {
  content: "";
  position: absolute;
  top: 1%;
  left: 1%;
  right: 1%;
  bottom: 1%;
  border: 1px solid #c69e61;
  pointer-events: none;
}
.certificate-ver02 .certificate-wrap .head-letter {
  display: flex;
  justify-content: space-between;
}
.certificate-ver02 .certificate-wrap .head-letter img {
  width: 100%;
  max-width: 180px;
}
.certificate-ver02 .certificate-wrap .head-letter .cer-number {
  font-size: 16px;
  font-weight: 600;
}
.certificate-ver02 .certificate-wrap .head-title {
  font-size: 42px;
  font-weight: 300;
  text-align: center;
  padding: 40px 0;
}
.certificate-ver02 .certificate-wrap .details-cer {
  position: relative;
  font-size: 19px;
  font-weight: 400;
}
.certificate-ver02 .certificate-wrap .details-cer img {
  width: 400px;
  opacity: 0.1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.certificate-ver02 .certificate-wrap .details-cer .data {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  line-height: 2em;
  font-size: 18px;
  font-weight: 600;
}
.certificate-ver02 .certificate-wrap .details-cer .data li {
  display: flex;
  gap: 20px;
}
.certificate-ver02 .certificate-wrap .details-cer .data p {
  width: 80px;
  text-align: justify;
}
.certificate-ver02 .certificate-wrap .details-cer .parag {
  line-height: 2em;
  font-size: 20px;
  text-align: center;
  font-weight: 600;
}
.certificate-ver02 .certificate-wrap .date-cer {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  padding-top: 40px;
}
.certificate-ver02 .certificate-wrap .footer-cer {
  font-size: 23px;
  font-weight: 700;
  text-align: center; /* height: 80px; */
  padding-top: 120px;
  position: relative;
}
.certificate-ver02 .certificate-wrap .footer-cer img {
  position: absolute;
  width: 100px;
  right: 0;
  top: 90px;
  z-index: 0;
  opacity: 0.6;
}

.certificate-ver02 > .certificate-wrap > .footer-cer > span {
  position: relative;
  z-index: 1;
}
.certificate-ver01 > .certificate-wrap > .footer-cer > span {
  position: relative;
  z-index: 1;
}

@media print {
  @page {
    size: auto;
    margin: 15mm 0;
  }
  @page :first {
    margin: 0 0 15mm;
  }
  html,
  body {
    width: 210mm;
    height: auto;
  }
  #wrap {
    padding-bottom: 0px;
  }
  [data-print] .print-title {
    display: none;
  }
  .print-page {
    padding: 0;
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: 267mm;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
  [data-print="printConfirm"] .print-page {
    height: 267mm;
  }
  .cover-background {
    width: 100rem;
    height: 100rem;
  }
}

/* @media (min-width: 992px) {
  #previewArea > #print-page-v2 {
    transform: scale(1);
  }
}
@media (max-width: 991px) {
  #previewArea > #print-page-v2 {
    transform: scale(0.85);
  }
}
@media (max-width: 600px) {
  #previewArea > #print-page-v2 {
    transform: scale(0.65);
  }
} */
