/**
* View Common Styles
* 00 keycolor
* 01 index
* 02 content
** 02-1. header
** 02-2. certificate container
**/

:root {
  /* 여기서 컬러를 수정하세요 */
  --cert-container-border-color: #d2eaf7;
  --cert-title-keycolor: #1d96d5;
}

/* 00 keycolor*/

/* 01 index */

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  font-family:
    "LatoWeb", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

a,
a:visited,
a:link {
  color: #333;
  text-decoration: none;
}

select,
input {
  border-radius: 5px;
}

button {
  cursor: pointer;
}

/* 02 content
** 02-1. header **/

/* 02 content
** 02-2. certificate container **/

#xn-certificate {
  margin: 0px auto;
  height: 1190px;
  width: 840px;
  /* 인쇄시 CSS를 반드시 반영하게 한다*/
  -webkit-print-color-adjust: exact !important;
  position: relative;
}

#xn-certificate .xn-certificate-banner {
  position: absolute;
  width: 170px;
  height: 300px;
  background-repeat: no-repeat;
  top: 0;
  right: 60px;
  z-index: 9999;
  background-size: cover;
  background-image: url(xn_certificate_banner_img.png);
}

#xn-certificate .xn-certificate-container {
  border: 20px solid var(--cert-container-border-color);
  background: #fff;
  height: 1120px;
  padding: 15px;
}

#xn-certificate .xn-certificate-container .xn-certificate-bg {
  position: absolute;
  top: 190px;
  left: 71px;
  background-position: center center;
  background-image: url(xn_certificate_bg_watermark_img.png);
  width: 700px;
  height: 700px;
  background-size: contain;
  background-repeat: no-repeat;
  filter: grayscale(1);
}

#xn-certificate .xn-certificate-container .xn-certificate-bg img {
  width: 700px;
  height: 800px;
}

#xn-certificate .xn-certificate-container .xn-certificate-wrap {
  border: 2px solid #ddd;
  padding: 50px 35px;
  height: calc(100% - 174px);
  position: absolute;
  width: calc(100% - 144px);
}

.xn-certificate-header {
  font-size: 12px;
  color: #929292;
}

.xn-certificate-header .xn-certificate-no {
  margin-bottom: 3px;
}

.xn-certificate-main {
  margin: 40px 0px 0px 0px;
}

.xn-certificate-main-slogan-en {
  font-size: 16px;
  font-weight: bold;
  color: var(--cert-title-keycolor);
}

.xn-certificate-main-slogan-title-en {
  font-size: 40px;
  font-weight: bold;
}

.xn-certificate-main-slogan-ko {
  font-size: 72px;
  font-weight: bold;
}

.xn-certificate-main-info-container {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin-top: 80px;
}

.xn-certificate-main-info-name-title {
  font-size: 18px;
  margin-top: 20px;
  color: #898989;
}

.xn-certificate-main-info-name-value {
  font-size: 23px;
  font-weight: bold;
}

.xn-certificate-main-info-course-title {
  font-size: 18px;
  margin-top: 20px;
  color: #898989;
}

.xn-certificate-main-info-course-value {
  font-size: 23px;
  font-weight: bold;
}

.xn-certificate-sub {
}

.xn-certificate-sub-info-container {
  color: #666;
  font-size: 18px;
  border-left: 2px solid #ddd;
  padding: 12px 16px;
  margin: 80px 0px;
}

.xn-certificate-sub-info {
  display: block;
  vertical-align: top;
  margin: 12px 0px;
}

.xn-certificate-sub-info-title {
  display: inline-block;
  vertical-align: middle;
  letter-spacing: 2px;
}

.xn-certificate-sub-info-value {
  display: inline-block;
  vertical-align: middle;
}

.xn-certificate-footer {
}

.xn-certificate-footer-slogan {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 40px;
}

.xn-certificate-footer-issued-at {
  font-size: 18px;
  color: #666;
}

.xn-certificate-organization {
  position: absolute;
  bottom: 60px;
  left: 40px;
  font-size: 22px;
  font-weight: bold;
}

.xn-logo-container {
  display: block;
  width: 210px;
  position: absolute;
  bottom: 50px;
  right: 40px;
  background-image: url(xn_certificate_logo_img.png);
  background-position: center center;
  background-repeat: no-repeat;
  height: 58px;
}

.xn-logo {
  display: block;
  width: 210px;
}

/* 03 custom design - 색상은 :root 변수로 조정 (--cert-container-border-color, --cert-title-keycolor) */