@charset "UTF-8";
/* 로그인 */
#login-wr {position: fixed; left: 0; top: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.1); display: flex; justify-content: center; align-items: center; z-index: 999;}
#login-wr .inner {max-width: 450px; background-color: #fff; border-radius: 12px; margin: 0 auto; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; overflow: hidden;}
#login-wr .inner .top-wr {padding: 3rem 1rem; background: var(--main-color); position: relative; display: flex; flex-direction: column; align-items: center;}
#login-wr .inner .top-wr .icon-wr {width: 4rem; height: 4rem; border-radius: 100%; background: rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; margin-bottom:1rem}
#login-wr .inner .top-wr .icon-wr img {width: 2.5rem; height: 2.5rem;}
#login-wr .inner .top-wr h2 {font-size:1.75rem; text-align: center; color: #fff;}
#login-wr .inner .top-wr .desc {color: #767676; margin-top:1rem; text-align: center; color: #fff;}
#login-wr .inner .form-wr {padding: 2rem;}
#login-wr .inner .form-wr .info {font-size:0.875rem;background-color: #f1f1f1; border-radius: 4px; padding: 1rem; color: #555; color: var(--main-color);}
#login-wr .inner .form-wr div+div {margin-top:1.5rem}
#login-wr .inner .form-wr .re-btn {display: flex; text-align: center;color: #555; text-decoration: underline; font-size: 0.875rem; margin:0 auto; margin-top:2rem; text-underline-offset: 4px;}
#login-wr .inner .form-wr .tip {color: var(--main-color); font-weight: 500; margin-top: .25rem; font-size: 0.875rem;}
#login-wr .close-btn {position: absolute; right: 2rem; top: 2rem; cursor: pointer;}
.disable input {background: #f1f1f1;}
.disable .btn {background: #999;}

/* Registration */
.registration .form-wr {display: none;}
.registration .form-wr.active {display: block;}
.registration .form-wr .btn {background: #b12f2f;}
.registration .title-wr {border-bottom: 0 !important; text-align: center;}
.registration .step-wr {display: flex; align-items: center; gap: 1rem;}
.registration .step {width: 2.5rem; height: 2.5rem;  border-radius: 100%;  display: flex; align-items: center; justify-content: center; font-weight: 700; background: #eee;  color: #555; box-sizing: border-box;border: 2px solid #ddd; transition: 0.15s ease;}
.registration .step.active {background: var(--main-color); color: #fff;border: 2px solid var(--main-color); transition: 0.15s ease;}
.registration .line {flex-grow: 1; background: #ddd; height: 2px;}
.registration .form-wr h3 {font-size: 1.25rem; margin-bottom:1.5rem; padding-top: 3rem;}
.registration .form-wr .form {display: flex; flex-wrap:wrap; gap: 2rem;}
.registration .inner > .btn-wr {position: relative; padding-top: 3rem;}
.registration .inner > .btn-wr .prev {background: #e5e5e5; color: #444; position: absolute; left: 0; top: 0;transition: 0.15s ease;}
.registration .inner > .btn-wr .prev:hover {background: #bdbdbd; transition: 0.15s ease;}
.registration .inner > .btn-wr .btn {font-weight: 700; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; display: none;}
.registration .inner > .btn-wr .next, .registration .inner > .btn-wr .submit { position: absolute; right: 0; top: 0;}
.select2-container {width: 100% !important;}
.select2-container--default .select2-selection--single {height: auto !important; position: relative !important;  border-radius: 8px !important; border-color:#999 !important; transition: 0.15s ease;}
.select2-container--default .select2-selection--single:hover, .select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--single:active {border-color: var(--main-color) !important; transition: 0.15s ease;}
.select2-container .select2-selection--single .select2-selection__rendered {line-height: 120% !important; padding: 12px !important;}
.select2-container--default .select2-selection--single .select2-selection__arrow {top: 50% !important; transform: translateY(-50%) !important;}


/* stpe2 */
.registration .step1 .info {font-size: 0.875rem;color: #666;}
.registration .step2 .form {gap:1rem}
.registration .step2 .serial-wr {background: #f5f5f5; border: 1px solid #ddd; padding: 1rem; width: 100%; box-sizing: border-box; border-radius: 12px; display: flex; flex-direction: column; gap: 0.75rem;}
.registration .step2 small {font-size: 0.875rem; color: #666;}
.registration .step2 .serial-wr p {border-bottom: 1px solid #ddd; padding-bottom: .75rem; color: #444;}
.registration .step2 .serial-wr p b {color: #111827;}
.registration .step2 .btn-wr {width: 100%; margin: 0;}
.registration .step2 .btn-wr .btn {display: flex; align-items: center; justify-content: center; width: 100%; gap:8px }
.registration .step2 .btn-wr .btn svg {width: 1.5rem; height: 1.5rem;}
.registration .step2 .product-wr {padding-top: 1rem; border-top: 1px solid #ddd; width: 100%;}
.registration .step2 .product-wr h4 {font-size:1rem; color: #555;}
.registration .step2 .product-wr .item-list {display: flex; flex-direction: column; gap: .75rem; margin-top: .75rem;}
.registration .step2 .product-wr .item-list .item {border: 1px solid #ddd; padding: 1rem; box-sizing: border-box; border-radius: 8px; background: #fbfbfb; display: flex; justify-content: space-between; align-items: center;}
.registration .step2 .product-wr .item-list .item .txt-wr {display: flex; flex-direction: column; gap: 4px;}
.registration .step2 .product-wr .item-list .item .txt-wr b {font-weight: 500;}
.registration .step2 .product-wr .item-list .item .txt-wr span {font-size: 0.875rem; color: #555;}
.registration .step2 .product-wr .item-list .item button svg {width: 1.5rem; height: 1.5rem; color: #ef4444;}

/* step3 */
.registration .step3 .check-wr {border: 1px solid #ddd; border-radius: 8px; padding: 1rem; width: 100%; display: flex; flex-direction: column; gap: 1rem; box-sizing: border-box;}
.registration .step3 .check-wr .flex-100 {flex-direction: row; align-items: center;}
.registration .step3 .check-wr .flex-100 input {flex-grow: 0; width: 1rem; height: 1rem;}
.registration .step3 .check-wr .flex-100 label {font-weight: 400; font-size: 1rem; width: calc(100% - 1rem - 6px);}
.registration .step3 .check-wr .flex-100 label {display: flex; align-items: center; justify-content: space-between;}
.registration .step3 .check-wr .flex-100 label img {transform: rotate(90deg); filter: brightness(0); margin-right:1rem}
.registration .step3 .check-wr .agree-detail {margin-left: 2rem; background:#f1f1f1; padding:1rem; box-sizing: border-box; border-radius: 8px; display: none; height: auto; overflow: hidden;}
.registration .step3 .check-wr .agree-detail p {font-weight: 500; margin-bottom:.5rem}
.registration .step3 .check-wr .agree-detail li {position: relative; padding-left:0.8rem; color:#555}
.registration .step3 .check-wr .agree-detail li+li {margin-top:8px}
.registration .step3 .check-wr .agree-detail li::after {position: absolute; content: '-'; left: 0; top:0}
.registration .step3 .check-wr .detail-btn {background: #ffedf2; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;  border-radius: 4px; cursor: pointer; border: 1px solid #eee;}
.registration .step3 .check-wr .detail-btn img {transform: rotate(90deg); transition: 0.15s ease;}
.registration .step3 .check-wr .detail-btn.on img{transform: rotate(270deg);}

/* step4 */
.registration .step4 .info-wr{border: 1px solid #ddd; border-radius: 8px; padding: 1.5rem; box-sizing: border-box; width: 100%; display: flex; justify-content: flex-start; gap:1.5rem; align-items: flex-start;}
.registration .step4 .info-wr .img-wr {width: 3rem; height: 3rem; background: #ffedd5; border-radius: 100%; display: flex; align-items: center; justify-content: center;}
.registration .step4 .info-wr .img-wr svg {width: 1.5rem; height: 1.5rem; color: rgb(249 115 22);}
.registration .step4 .info-wr .txt-wr {display: flex; flex-direction: column; gap:.5rem; width: 100%; width: calc(100% - 3rem - 1.5rem);}
.registration .step4 .info-wr .txt-wr h4 {font-size: 1.125rem; margin-bottom: .5rem;}
.registration .step4 .info-wr .txt-wr dl {display: flex;}
.registration .step4 .info-wr .txt-wr dl dt {width: 30%; color: #555;}
.registration .step4 .info-wr .txt-wr dl dd {width: 70%; font-weight: 500;}
.registration .step4 .info-wr .txt-wr p {color: #555;}
.registration .step4 .info-wr .txt-wr span {font-size: 0.875rem; color: #555; font-weight: 400;}
.registration .step4 .info-wr.registered .img-wr  {background: #dbeafe;}
.registration .step4 .info-wr.registered .img-wr svg{color: rgb(59 130 246)}

.registration.productAdd .form-wr{display: block;}

/* Lookup */
.lookup .inner .top-wr {display: flex; align-items: center; justify-content: space-between;border-bottom: 1px solid #ddd; padding-bottom: 1.5rem;}
.lookup .inner .top-wr .btn {background-color: #fff; border: 1px solid #ddd;}
.lookup .inner .title-wr {margin-bottom: 0;}
.lookup .inner .title-wr h4 {font-size:1.875rem;}
.lookup .inner h3 { font-size: 1.125rem; display: flex; align-items: center; gap: 6px; margin-bottom:1rem}
.lookup .inner h3 svg {color: var(--main-color);}
.lookup .inner .btn-wr {flex-grow: 1; width: 100%; margin-top:1rem; text-align: right;}
.lookup .inner .btn-wr .btn {color: #fff;}
.lookup .inner.info .list-wr {margin-top: 2rem; display: flex; gap: .5rem;}
.lookup .inner.info .list-wr .box {flex: 1;}
.lookup .inner.info .list-wr li {color:#555; position: relative; margin: 8px 0; display: flex; align-items: flex-start;}
.lookup .inner.info .list-wr li span:nth-of-type(1){width: 94px; display: block; font-weight: 500;}
.lookup .inner.info .list-wr li span.label {margin-left: 4px; font-weight: 700; width: auto;}
.lookup .inner.info .list-wr li.email-wr .notranslate {word-break: break-all;}
.lookup .inner.info .list-wr .box.agree li {font-size: 0.875rem; justify-content: space-between;}
.lookup .inner .item {width: 100%;}
.lookup .inner .title {font-size:1.375rem; font-weight:700; margin-bottom:2rem; padding: 2rem; box-sizing: border-box; background-color: #f9f9f9; border-bottom: 1px solid #eee;}
.lookup .inner .item {padding: 0 2rem; margin-bottom: 2rem; box-sizing: border-box;}
.lookup .inner .item {display: flex;}
.lookup .inner .item .box {flex: 1;}
.lookup .inner .item .txt-wr p {margin: 8px 0; color: #555; display: flex;}
.lookup .inner .item .txt-wr p span {width:auto; display: block; font-weight: 500; margin-right: 20px; color: #333;}
.lookup .inner .item .txt-wr > span {color: #555; font-size: 0.875rem;}
.lookup .inner .item+.item {margin-top:2rem;padding-top:2rem; border-top: 1px solid #ddd;}
.lookup .inner.registration {padding: 0; overflow: hidden;}
.lookup .label {color: var(--main-color); border-radius: 4px; padding: 2px 6px; font-size:13px; background-color: #fff1f5;}
.lookup .btn-wr {text-align: center; margin:2rem auto; max-width: 900px; width:96%}
.lookup .btn-wr a {color: #fff; font-weight: 500;}
.lookup .btn {display: flex; align-items: center; justify-content: center; width: auto; gap: 8px;}

/* Archive*/
.archive .search-wr {display: flex; justify-content: space-between; position: relative;}
.archive .search-wr .input-wr {width:100%}
.archive .search-wr .input-wr input {width: 100%; padding-right: 3rem;}
.archive .search-wr .submit-wr {width: 50px; position: absolute; right: 0; top: 0;}
.archive .search-wr .submit-wr button {width: 100%; display: flex; align-items: center; justify-content: center; padding: 9px;}
.archive .search-wr .submit-wr svg {color:rgb(156 163 175); width: 1.5rem; height: 1.5rem;}
.list-table .list-header {margin-top:1.5rem; display: flex;}
.list-table .item {padding: 14px; box-sizing: border-box; color: #555; display:flex; justify-content: center; align-items: center;}
.archive .list-table .item.number {width: 60px;}
.archive .list-table .item.name {width: calc(100% - 60px - 120px - 100px); justify-content: flex-start;}
.archive .list-table .item.date {width: 120px;}
.archive .list-table .item.download {width: 100px;}
.archive .list-table .list-body .body {display: flex; transition: 0.15s ease;border-bottom: 1px solid #ddd;}
.list-table .item.align-c {text-align: center;}
.list-table .list-header .item {background-color: #f5f5f5; font-size:0.875rem; font-weight:500}
.list-table .list-body .body:hover {background: #f9f9f9; transition: 0.15s ease;}
.list-table .list-body .body .item.name {color: #1d1d1d; font-weight: 500; }
.list-table .list-body .body .item.name a {border-bottom: 0;}
.list-table .list-body .body .download a { transition: 0.15s ease; border:1px solid transparent;width: 40px; height: 40px; background: #f1f1f1; border-radius: 100%; align-items: center; display: flex; justify-content: center;}
.list-table .list-body .body .download a:hover {background: #fff; border: 1px solid #ddd; transition: 0.15s ease;}
.paging {margin-top:3rem}
.paging ul {display: flex; justify-content: center; align-items: center; gap:1rem}
.paging ul li a{font-weight: 400 ;}
.paging ul li.current a{font-weight: 700; color: var(--main-color);}
.paging ul li.next a,
.paging ul li.prev a {width: 30px; height: 30px; display: flex; align-items: center ;justify-content: center; background: #fff; border-radius: 100%; border: 1px solid #ddd; transition: 0.15s ease;}
.paging ul li.next:hover a,
.paging ul li.prev:hover a {background: #f1f1f1; transition: 0.15s ease;}
 
/* support */
.support .info-wr {padding: 1.5rem; border: 1px solid #ddd; background: #f9f9f9; border-radius: 12px;}
.support .info-wr ul {margin-top: 1rem;}
.support .info-wr ul li {color: #555; font-size:0.875rem}
.support .info-wr ul li+li {margin-top: .25rem;}
.support .top-wr {display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; background: #fff3f5; border-radius: 12px; border: 1px solid #ddd;}
.support .top-wr p {position: relative; display: flex; align-items: center; gap:8px; font-size:0.875rem}
.support .top-wr p span {display: block; width: 16px; height: 16px; position: relative}
.support .top-wr p span.circle1 {animation: circle1 1s infinite;width: 16px; height: 16px; border-radius: 100%; background: #ffe2e8; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.support .top-wr p span.circle2 {width: 8px; height: 8px; border-radius: 100%; background: var(--main-color); z-index: 9; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
@keyframes circle1 {
    0% {width:8px; height: 8px; opacity: 0;}
    100% {width:16px; height: 16px; opacity: 1;}
}

.support .top-wr .btn-wr {margin-top: 0;}
.support .list-table .list-body .body a{display: flex; transition: 0.15s ease;border-bottom: 1px solid #ddd;}
.support .list-table .item.label {width: 96px;}
span.label {font-size:13px; padding: 4px 8px; border-radius: 20px; font-weight: 500;}
span.label.completion {color: #15803d; background: rgb(220 252 231);}
span.label.waiting {color: rgb(194 65 12); background: rgb(255 237 213);}
.support .list-table .item.title {width: calc(100% - 96px - 90px - 160px); justify-content: flex-start;}
.support .list-table .item.writer {width: 90px;}
.support .list-table .item.date {width: 160px; font-size:14px}
.support .list-table .body .item.title {font-weight: 500; color: #1d1d1d; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block;}
.support .list-table .body .item.title.secret svg {width: 1rem; height: 1rem; margin-right: 8px;}
.support .list-table .body:not(.disable) .item.title.secret svg {color:#e44373;}
.support .list-table .body:not(.disable) {cursor: pointer;}
.support .list-table .body.disable .item.title {color: #a9a9a9;}

.qna .form {max-height: 660px; overflow-y: scroll;}
.qna .form{
   -ms-overflow-style: none;
}
.qna .form::-webkit-scrollbar{
  display:none;
}
.qna .form  div+div {margin-top:2rem}
.qna .form .text-wr {padding: 1rem; border-radius: 12px; background: #f9f9f9;}
.qna .form .text-wr b{text-decoration: underline; text-underline-offset: 3px; color: var(--main-color);}
.qna .form .info-wr {background: #fff3f5; border: 1px solid var(--main-color); padding: 1rem; border-radius: 12px; color: var(--main-color); font-weight: 500;}
.qna .form .toggle-wr {background-color: #f9f9f9; border-radius: 8px; padding:1rem; display: flex; align-items: center; justify-content: space-between;}
.qna .form .toggle-wr .title {display: flex; align-items: center; gap: 7px; font-weight: 500;}
.qna .form .toggle-wr .title svg {width: 1rem; height: 1rem; color: #e44373;}
.qna .form .toggle-wr .toggle.on {background: var(--main-color);transition: 0.15s ease;}
.qna .form .toggle-wr .toggle {width: 44px; border-radius: 44px; height: 24px; background: #e5e5e5;position: relative; cursor: pointer;transition: 0.15s ease;}
.qna .form .toggle-wr .toggle::after { transition: 0.15s ease;position: absolute; left: 2px; content: ''; width: 20px; height: 20px; content: ''; background: #fff; border-radius: 100%; top: 50%; transform: translateY(-50%);}
.qna .form .toggle-wr .toggle.on::after {left: auto; left: calc(44px - 22px); transition: 0.15s ease;}
.qna-wr.list-popup h2 {width: calc(100% - 40px); word-break: break-all;}
.qna-wr.list-popup h2 span {margin-right: 6px;}
.qna-wr.list-popup .list-item {margin-top:2rem}
.qna-wr.list-popup .list-item .arrow {margin:1rem 0; padding-left: 2rem;}
.qna-wr.list-popup .list-item .arrow svg {color: #555;}
.qna-wr.list-popup .list-item .item .icon-wr {width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 100%;}
.qna-wr.list-popup .list-item .item .info-wr {display: flex; gap:0.75rem; align-items: center; position: relative;}
.qna-wr.list-popup .list-item .item .info-wr button {position: absolute; right: 0; top: 50%; padding: .5rem; transform: translateY(-50%);}
.qna-wr.list-popup .list-item .item .info-wr .info {display: flex; flex-direction: column; gap: 3px;}
.qna-wr.list-popup .list-item .item .info-wr .info .date {font-size: 12px; color: #555;}
.qna-wr.list-popup .list-item .item .request {background-color: #f9f9f9; border: 1px solid #eee; padding: 1rem; margin-top:1rem; border-radius: 12px; max-height: 150px; overflow-y: scroll;}
.qna-wr.list-popup .list-item .item .request{
   -ms-overflow-style: none;
}
.qna-wr.list-popup .list-item .item .request::-webkit-scrollbar{
  display:none;
}
.qna-wr.list-popup .list-item .item.customer .icon-wr {background: #f4f5f5;}
.qna-wr.list-popup .list-item .item.admin .icon-wr {background: #ffe2e8;}
.qna-wr.list-popup .list-item .item.admin .icon-wr svg {color: var(--main-color);}
.qna-wr.list-popup .list-item .item.admin .request {background-color: #fff3f5; font-weight: 500;}
.qna-wr.list-popup .list-item .item.disable {opacity: 0.3;}
.qna-wr .btn-wr {text-align: right;}


.popup {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1); z-index: 999; display: flex; align-items: center; justify-content: center;}
.popup .inner {background: #fff; border-radius: 20px; padding: 2rem; max-width: 900px; width: 96%; box-sizing: border-box; position: relative;}
.popup .inner h2 {font-size:1.25rem; border-bottom: 1px solid #ddd; margin-bottom: 1rem; padding-bottom: 1rem;}
.popup .inner .close-btn {position: absolute; right: 2rem; top: 2rem; background: #999; border-radius: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.15s ease;}
.popup .inner .close-btn:hover {background: var(--main-color); transition: 0.15s ease;}


/* edit info */
.edit-info .form-wr {display: none;}
.edit-info .form-wr.active {display: block;}
.edit-info .form-wr .btn {background: #b12f2f;}
.edit-info .form-wr .form {display: flex; flex-wrap:wrap; gap: 2rem;}
.edit-info .inner > .btn-wr {position: relative; padding-top: 3rem;}
.edit-info .inner > .btn-wr .prev {background: #e5e5e5; color: #444; position: absolute; left: 0; top: 0;transition: 0.15s ease;}
.edit-info .inner > .btn-wr .prev:hover {background: #bdbdbd; transition: 0.15s ease;}
.edit-info .inner > .btn-wr .btn {font-weight: 700; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; display: none;}
.edit-info .inner > .btn-wr .next, .edit-info .inner > .btn-wr .submit { position: absolute; right: 0; top: 0;}
.edit-info .inner .form-wr .tip {color: var(--main-color); font-weight: 500; margin-top: .25rem; font-size: 0.875rem;}
.edit-info .inner .form-wr .info {width:100%;font-size:0.875rem;background-color: #f1f1f1; border-radius: 4px; padding: 1rem; color: #555; color: var(--main-color); text-align: center;}
.tab-wr {margin: 2rem 0;}
.tab-wr ul {display: flex; justify-content: center;}
.tab-wr ul li {flex: 1;transition: 0.15s ease;}
.tab-wr ul li a {color: #555; border: 1px solid #ddd; font-weight: 500; padding: 1rem; text-align: center; background: #f5f5f5;}
.tab-wr ul li.active a {color: #fff; background: var(--main-color); transition: 0.15s ease;}