@charset "utf-8";
/* Certificate common */
.certificate-wrap {position:relative; display: table; width: 100%; max-width:900px; height: 1260px; margin:10px auto 0; padding:0; border:2px solid #e8d29c; background: #fff;}
.certificate-wrap .lefttop {position:absolute; left:-2px; top:-2px; display:block; width:39px; height:39px}
.certificate-wrap .righttop {position:absolute; right:-2px; top:-2px; display:block; width:39px; height:39px}
.certificate-wrap .leftbottom {position:absolute; left:-2px; bottom:-2px; display:block; width:39px; height:39px}
.certificate-wrap .rightbottom {position:absolute; right:-2px; bottom:-2px; display:block; width:39px; height:39px}

.certificate-cont {display: table-cell; width: 100%; padding: 20px 50px; vertical-align: middle;}
.certificate-cont h1 {margin-bottom: 40px; text-align:center; color:#222; font-size:34px; line-height:36px; font-weight:800}
.certificate-cont h1 em {display:block; color:#5267d6}
.certificate-cont h2 {margin:40px 0 15px 0; font-weight:700; font-size:18px; color:#222}
.certificate-cont h2:first-child {margin-top:70px}
.certificate-cont .innerbox {position:relative;}

.certificate-info {margin-bottom: 20px;}
.certificate-info dl {display: flex; margin-top: 6px; font-weight: 600; font-size: 14px;}
.certificate-info dl:first-of-type {margin-top: 0;}
.certificate-info dt {flex-basis: 25%; padding: 0 30px; color: #858585;}
.certificate-info dd {color: #222222;}

.certificate-cont .tit-table {display: block; width: 100%; height: 36px; margin: 20px 0 0; padding: 7px 30px 12px; border-radius: 6px; background: #414e94; font-weight: 600; line-height: 18px; font-size: 16px; color: #fff; overflow: hidden;}
.certificate-cont .tit-table + .certificate-table {margin-top: 0;}
.certificate-cont .tit-table + .certificate-table tr:first-child th,
.certificate-cont .tit-table + .certificate-table tr:first-child td {border-top: none;}
.certificate-table {margin-top: 10px; border-bottom: 1px solid #eaeaea;}
.certificate-table table {width: 100%; table-layout: fixed; text-align: center; line-height: 1.2; font-size: 14px; color: #858585;}
.certificate-table th,
.certificate-table td {padding: 7px 10px; border-top: 1px solid #eaeaea; border-left: 1px solid #eaeaea;}
.certificate-table th.left,
.certificate-table td.left {text-align: left; padding-left: 30px; padding-right: 30px;}
.certificate-table tr *:first-child {border-left: none;}
.certificate-table tr *:last-child {border-right: none;}
.certificate-table tbody th {font-weight: 400;}
.certificate-table td .txt-black {color: #222;}

.certificate-table.info table {text-align: left;}
.certificate-table.info th,
.certificate-table.info td {text-align: left; padding-left: 30px; padding-right: 30px;}
.certificate-table.info td {color: #222;}

.certificate-table.course {margin-top: 90px;}
.certificate-table.course table {text-align: left;}
.certificate-table.course th,
.certificate-table.course td {text-align: left; padding: 15px 30px;}
.certificate-table.course th {background: #f7f7f7; font-weight: 400; color: #858585;}
.certificate-table.course td {color: #222;}

.certificate-table.score {border-bottom: 1px solid #7b7b7b;}
.certificate-table.score tr:first-child th,
.certificate-table.score tr:first-child td {border-top: 1px solid #7b7b7b;}
.certificate-table.score thead th {padding: 11px; font-weight: 600; font-size: 12px; color: #222222; background: #f7f7f7;}
.certificate-table.score thead + tbody tr:first-child th,
.certificate-table.score thead + tbody tr:first-child td {border-top: 1px solid #7b7b7b !important;}
.certificate-table.score tfoot th,
.certificate-table.score tfoot td {border-top: 1px solid #7b7b7b !important; background: #f6f6fe;}
.certificate-table.score tfoot th {border-right: none; text-align: left; padding-left: 30px; font-weight: 700; color: #5267d6;}
.certificate-table.score tfoot td {border-left: none; font-weight: 700;}

.certificate-cont .sign-msg {width:100%; margin:30px 0 0 0; text-align:center}
.certificate-cont .sign-msg p {font-size:14px; color:#222}
.certificate-cont .sign-msg > .date {display:block; margin:15px 0 0 0; font-size:14px; color:#666}
.certificate-cont .sign-msg > div {position:relative; margin: -25px auto auto;}
.certificate-cont .sign-msg > div strong {display:block; position:relative; z-index:20; padding: 40px 100px 0; font-weight: 600; font-size:22px; color:#222;}
.certificate-cont .sign-msg > div p {margin-top: 10px; font-weight: 600; font-size:22px; color: #222;}
.certificate-cont .sign-msg > div img {position:absolute; right:0; top:0; z-index:19; width: 150px; height: 150px;}
.certificate-cont .sign-msg.wide {margin-top: 90px;}
.certificate-cont .sign-msg.wide > .date {margin-top: 70px;}
.certificate-cont .sign-msg.wide > div {margin-top: 20px;}
.certificate-cont .sign-msg.wide > div p {margin-top: 20px;}

/* Attend Certificate */
.certificate-wrap .txt-uniquenm {position:absolute; left:50px; top:50px; text-transform:uppercase}
.certificate-wrap .boardlist + .boardlist {margin-top:40px}
.certificate-wrap ul.status-score {margin-top:0; border: 1px solid transparent;}

/* Course completion Certificate */



/* */
.white-bg { background: #ffffff;}
.html2canvas-container { width: 3000px !important; height: 3000px !important;}

.watermark {position: absolute; top: 50%; left: 50%; margin-top: -225px; margin-left: -170px; width: 340px; height: 450px; opacity: .15; z-index: 9999; pointer-events: none;  background-size: contain; background-repeat: no-repeat; background-position: center;}

/* 251022 산인공 수료증 발급 */
.certificate-wrap.type-hrd {border-width: 5px; background-image: url("../images/bg_certificate.png"); background-position: 0 0;}
.certificate-wrap.type-hrd .certificate-cont h2 {margin: 30px 0 10px 0;}
.certificate-wrap.type-hrd .certificate-cont h2:first-child {margin-top: 50px;}
.certificate-wrap.type-hrd .note {}
.certificate-wrap.type-hrd .note h3 {color: #444; font-size: 16px; margin: 18px 0 10px 0;}
.certificate-wrap.type-hrd .note ul {}
.certificate-wrap.type-hrd .note ul li {position: relative; padding-left: 0.6em; color: #666; font-size: 15px;}
.certificate-wrap.type-hrd .note ul li:before {content: '∙'; position: absolute; left: 0;}
.certificate-wrap.type-hrd .certificate-cont .sign-msg {margin-top: 50px;}
.certificate-wrap.type-hrd .certificate-cont .sign-msg p {color: #222; font-size: 20px; font-weight: 700;}
.certificate-wrap.type-hrd .certificate-cont .sign-msg > .date {color: #222; font-size: 16px;}
.certificate-wrap.type-hrd .certificate-cont .sign-msg > div {margin-top: 50px;}
.certificate-wrap.type-hrd .certificate-cont .sign-msg > div img {position: static; width: auto; height: auto;}
.certificate-wrap.type-hrd img {max-width: 100%;}
.certificatelist table {width: 100%; table-layout: fixed; line-height: 1.2; font-size: 15px; color: #222; border-top: 1px solid  #787878; border-bottom: 1px solid #787878;}
.certificatelist table th,
.certificatelist table td {border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea;}
.certificatelist table th {padding: 12px 10px 12px 30px; background: #f7f7f7; font-weight: 400; color: #989a9d; text-align: left;}
.certificatelist table td {padding: 12px 10px 12px 30px; background: #fff; font-weight: 400; color: #222;}
@media (max-width: 720px) {
    .certificate-cont {padding: 20px 20px;}
    .certificatelist table th {padding-left: 10px;}
    .certificatelist table td {padding-left: 10px;}
}