@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.1/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/*
** html tag reset
*/
* {
    margin: 0;
    padding: 0;
    font-family: "Wanted Sans Variable", sans-serif;
    line-height: 1;
    vertical-align: middle;
    background: transparent;
    max-height: 99999px;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    box-sizing: border-box;
}
html, body {
    margin: 0;
    height: 100%;
}
html.hidden {
    overflow: hidden;
}
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-thumb {
    background-color: #ABADB5;
    border-radius: 32px;
    background-clip: padding-box;
}
::-webkit-scrollbar-track {
    background-color: #CCCCCC;
    box-shadow: inset 0px 0px 5px white;
}

.popupWrap {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.3);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: .3s ease-in-out;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}
.popupWrap .popupBg {
    position: fixed;
    top: 0;
    background: transparent;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    padding: 0 0 0;
    max-height: 100%;
    pointer-events: none;
}
.popupWrap.show {
    visibility: visible;
    opacity: 1;
    /*display: inline-flex;*/
}
.popupWrap.show > div {
    /*transform: translateY(0);*/
    z-index: 2;
}
.popupWrap.show > div.popupBg {
    z-index: 1;
}
.popupWrap .hide {
    display: none !important;
}
.popupWrap .popupBody {
    width: 446px;
    display: inline-flex;
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 16px;
    border: 1px solid #E9ECEF;
    background: #FFF;
    box-shadow: 0 10px 15px 0 rgba(108, 92, 231, 0.10);
}
.popupWrap .popupTitle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /*gap: 4px;*/
}
.popupWrap .popupTitle > span.login {
    background: url(../images/setting/i_login.svg) 50% / contain no-repeat;
    display: flex;
    width: 48px;
    height: 48px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-bottom: 16px;
}
.popupWrap .popupTitle > p {
    color: var(--Neutral-900, #212529);
    font-size: 20px;
    font-weight: 700;
    line-height: 140%;
}
.popupWrap .popupTitle > .popupClose {
    display: flex;
    width: 16px;
    height: 16px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    position: absolute;
    right: 16px;
    top: 16px;
}
.popupWrap .popupTitle > .popupClose:after {
    content: '';
    background: url(../images/i_close.svg) 50% / contain no-repeat;
    width: 16px;
    height: 16px;
}
.popupWrap .popupSubTitle {
    color: var(--Neutral-700, #495057);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    display: inline-block;
    margin-top: -20px;
}
.popupWrap .popupContent {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}
.popupWrap .popupContent .templateName {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--Neutral-900, #212529);
    word-break: break-all;
    text-overflow: ellipsis;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    margin-top: -10px;
}
.popupWrap .popupContent .textWrap {
    color: var(--Neutral-700, #495057);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    display: inline-block;
    margin: -10px 0 20px;
}
.popupWrap .popupContent .textWrap .textNormal {
    color: var(--Neutral-700, #495057);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
}
.popupWrap .popupContent .textWrap .textLight {
    color: var(--Neutral-600, #868E96);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
}
.popupWrap .popupBtn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;/
}
.popupWrap .popupBtn.column {/*가로*/
    display: flex;
    gap: 8px;
    align-self: stretch;
    flex-direction: column;
    width: 100%;
    align-items: stretch;
}
.popupWrap .popupBtn > div {
    height: 52px;
    width: 100%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    box-shadow: 0 1px 2px 0 rgba(108, 92, 231, 0.05);
    /* flex: 1 0 0; */
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}
.popupWrap .popupBtn > div.cancelBtn {
    border: 1px solid var(--Neutral-200, #E9ECEF);
    background: #FFF;
    color: var(--Neutral-700, #495057);
}
.popupWrap .popupBtn > div.submitBtn {
    border: 1px solid var(--Neutral-200, #6C5CE7);
    background: var(--Primary-500, #6C5CE7);
    color: #FFF;
}
.popupWrap input[type=checkbox] {
    display: none;
}
.popupWrap input[type=checkbox] + label {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    color: var(--Neutral-700, #495057);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
}
.popupWrap input[type=checkbox] + label:before {
    width: 20px;
    height: 20px;
    border-radius: var(--Radius-SM, 4px);
    border: 1px solid var(--Neutral-200, #E9ECEF);
    background: var(--Semantic-White, #FFF);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    content: '';
    font-family: 'xeicon' !important;
    line-height: 1;
    font-size: 14px;
    box-sizing: border-box;
}
.popupWrap input[type=checkbox]:checked + label:before {
    border: 1px solid var(--Primary-500, #6C5CE7);
    background: var(--Primary-500, #6C5CE7);
    color: #fff;
    content: '\e928';
}


.popupForm {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
}
.popupForm > dl {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}
.popupForm > dl dt {
    color: var(--Neutral-600, #868E96);
    font-size: 12px;
    font-weight: 700;
}
.popupForm > dl dd {
    width: 100%;
}

.popupAgree {display: flex;flex-direction: column;align-items: flex-start;gap: 16px;}
.popupAgree .popupAgreeCont {display: flex;height: 240px;padding: 16px;flex-direction: column;align-items: flex-start;align-self: stretch; overflow: auto; border-radius: 4px;border: 1px solid var(--Neutral-200, #E9ECEF);background: var(--Neutral-50, #F8F9FA); width: 100%; gap: 20px;}
/*
.popupAgree .popupAgreeCont::-webkit-scrollbar {display: none;}
.popupAgree .popupAgreeCont > dl {}
.popupAgree .popupAgreeCont > dl dt {color: var(--Neutral-700, #495057);font-size: 14px;font-weight: 700;line-height: 160%;}
.popupAgree .popupAgreeCont > dl dd {color: var(--Neutral-700, #495057);font-size: 14px;font-weight: 400;line-height: 160%;}*/

.popupAgree .popupAgreeCont .pageBodyRow {width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;}
.popupAgree .popupAgreeCont .pageBodyRow .pTit {width: 100%; display: flex;align-items: center;gap: 10px;align-self: stretch; color: var(--Neutral-900, #212529);font-size: 17px;font-weight: 700;line-height: 140%;letter-spacing: -0.24px;}
.popupAgree .popupAgreeCont .pageBodyRow .pCont {width: 100%; display: flex; gap: 8px;flex-direction: column;align-items: flex-start;align-self: stretch; color: var(--Neutral-700, #495057);font-size: 14px;font-weight: 400;line-height: 160%; word-break: keep-all;}
.popupAgree .popupAgreeCont .pageBodyRow .pCont > p {width: 100%; display: flex; gap: 8px;flex-direction: column;align-items: flex-start;align-self: stretch; color: var(--Neutral-700, #495057);font-size: 14px;font-weight: 400;line-height: 160%; word-break: keep-all;}

.popupAgree .popupAgreeCont .pageBodyRow .pItem {width: 100%; display: flex;align-items: flex-start;gap: 8px;align-self: stretch;}
.popupAgree .popupAgreeCont .pageBodyRow .pItem > label {display: block; color: var(--Neutral-700, #495057);font-size: 14px;font-weight: 400;line-height: 160%;}
.popupAgree .popupAgreeCont .pageBodyRow .pItem > p {display: flex;flex-direction: column;align-items: flex-start;flex: 1 0 0; color: var(--Neutral-700, #495057);font-size: 14px;font-weight: 400;line-height: 160%; word-break: keep-all;}
.popupAgree .popupAgreeCont .pageBodyRow .pItem > p > b {color: var(--Neutral-700, #495057);font-size: 14px;font-weight: 500;line-height: 160%;}
.popupAgree .popupAgreeCont .pageBodyRow .pItem > p > a {color: var(--Neutral-700, #495057);font-size: 14px;font-weight: 500;line-height: 160%;}

.popupAgree .popupAgreeCont .pageBodyRow .pSubTit {width: 100%; color: var(--Neutral-900, #212529);font-size: 14px;font-weight: 700;line-height: 160%;}
.popupAgree .popupAgreeCont .pageBodyRow .pSubList {width: 100%; display: flex; gap: 8px;flex-direction: column;align-items: flex-start;align-self: stretch; color: var(--Neutral-700, #495057);font-size: 14px;font-weight: 400;line-height: 160%; word-break: keep-all; padding-left: var(--Spacing-MD, 16px);}

.popupAgree .popupAgreeChk {display: flex;height: 20px;align-items: center;gap: 8px;align-self: stretch; cursor: pointer;}
.popupAgree .popupAgreeChk::before {content: ''; display: flex;width: 16px;height: 16px;box-sizing: border-box;flex-direction: column;align-items: flex-start;gap: 10px; border: 1px solid var(--Neutral-200, #E9ECEF);}
.popupAgree .popupAgreeChk > p {display: flex; user-select: none; padding: 1px 0;justify-content: center;align-items: center;gap: 10px; color: #495057; cursor: pointer; font-size: 14px; font-weight: 400;}
.popupAgree .popupAgreeChk.active {}
.popupAgree .popupAgreeChk.active::before {content: ''; border-color: var(--Primary-500, #6C5CE7);background: var(--Primary-500, #6C5CE7) url('../images/video/index/i_chk.svg') no-repeat center;}
.popupAgree .popupAgreeChk.active > p {}

.popupAgreeAll {display: flex;flex-direction: column;align-items: flex-start;gap: var(--Spacing-MD, 16px);align-self: stretch;}
.popupAgreeAll .popupAgreeChkEntire {width: 100%; display: flex;align-items: center;gap: 8px;align-self: stretch; cursor: pointer;}
.popupAgreeAll .popupAgreeChkEntire::before {content: ''; display: flex;width: 20px;height: 20px;flex-direction: column;justify-content: center;align-items: center;gap: 10px;aspect-ratio: 1/1; border-radius: var(--Radius-SM, 4px);border: 1px solid var(--Neutral-200, #E9ECEF);background: var(--Semantic-White, #FFF);}
.popupAgreeAll .popupAgreeChkEntire > p {color: var(--Neutral-700, #495057);font-size: 16px;font-weight: 600;line-height: 100%; user-select: none;}
.popupAgreeAll .popupAgreeChkEntire.active::before {content: ''; border-color: var(--Primary-500, #6C5CE7);background: var(--Primary-500, #6C5CE7) url('../images/video/index/i_chk.svg') no-repeat center;}
.popupAgreeAll .popupAgreeChkItem {width: 100%; display: flex;padding: var(--Spacing-MD, 16px);flex-direction: column;align-items: flex-start;gap: var(--Spacing-SM, 8px);align-self: stretch; border-radius: var(--Radius-SM, 4px);border: 1px solid var(--Neutral-100, #F1F3F5);background: var(--Neutral-50, #F8F9FA);}
.popupAgreeAll .popupAgreeChkItem > li {display: flex;height: 20px;align-items: center;gap: 8px;align-self: stretch; cursor: pointer;}
.popupAgreeAll .popupAgreeChkItem > li::before {content: ''; display: flex;width: 16px;height: 16px;justify-content: center;align-items: center;aspect-ratio: 1/1; background: url('../images/video/editor/i_black_chk.svg') no-repeat center; opacity: 0.5;}
.popupAgreeAll .popupAgreeChkItem > li > a {display: block; width: 16px;height: 16px;aspect-ratio: 1/1; background: url('../images/video/editor/i_black_right.svg') no-repeat center;}
.popupAgreeAll .popupAgreeChkItem > li > p {display: flex;justify-content: flex-start;align-items: center;gap: 10px;flex: 1 0 0; color: var(--Neutral-700, #495057); font-weight: 400; font-size: 14px; user-select: none; opacity: 0.5;}
.popupAgreeAll .popupAgreeChkItem > li.active::before  {content: ''; opacity: 1;}
.popupAgreeAll .popupAgreeChkItem > li.active > p {opacity: 1;}

/* 팝업 */
/* sendQrModal tooltip start */
.popupWrap#sendQrModal {

}
.popupWrap#sendQrModal .popupBody {
    border-radius: var(--Radius-MD, 8px);
    background: var(--Neutral-900, #212529);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
    transform: translate(390px, 160px);
    border: none;
    top: 0;
    left: 0;
    align-items: center;
    gap: 0;
}
.popupWrap#sendQrModal .popupBody:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 12px solid var(--Neutral-900, #212529);
    position: absolute;
    cursor: default;
    bottom: 100%;
    left: -16px;
    transform: translate(0, 40px) rotate(-90deg);
}
.popupWrap#sendQrModal .popupTitle > .popupClose {

}
.popupWrap#sendQrModal .popupTitle > .popupClose:after {
    content: '';
    background: url(../images/i_close_white.svg) 50% / contain no-repeat;
    width: 16px;
    height: 16px;
}
.popupWrap#sendQrModal .popupSubTitle {
    margin-top: 0
}
.popupWrap#sendQrModal .popupContent {
    align-items: center;
}
.popupWrap#sendQrModal .popupContent .qrImg {
    display: flex;
    width: 160px;
    height: 160px;
    padding: 8px;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    background: #FFF;
}
.popupWrap#sendQrModal .popupContent .qrImg img {
    width: 100%;
    height: 100%;
}
.popupWrap#sendQrModal .popupContent > section {
    margin-top: 10px;
    flex-direction: column;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}
.popupWrap#sendQrModal .popupContent > section > p {
    margin-top: 10px;
    flex-direction: column;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    color: #D1D5DC;
    text-align: center;
    /* Body/Large/Medium */
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%; /* 25.6px */
}
.popupWrap#sendQrModal .popupContent > section > .copyWrap {
    display: flex;
    flex-direction: row;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    flex: 1 0 0;
    /* overflow: hidden; */
    color: var(--Neutral-500, #ADB5BD);
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    display: flex;
    align-items: flex-start;
    gap: var(--Spacing-SM, 8px);
    align-self: stretch;
}
.popupWrap#sendQrModal .popupContent > section > .copyWrap > .copyText {
    display: flex;
    overflow: hidden;
    padding: var(--Spacing-SM, 8px);
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: var(--Radius-SM, 4px);
    border: 1px solid var(--Neutral-700, #495057);
    background: var(--Neutral-800, #343A40);
}
.popupWrap#sendQrModal .popupContent > section > .copyWrap > .copyText:before {
    content: attr(data-url);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    flex: 1 0 0;
    overflow: hidden;
    color: var(--Neutral-500, #ADB5BD);
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 22.4px */
}
.popupWrap#sendQrModal .popupContent > section > .copyWrap > .copyBtn {
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    aspect-ratio: 1 / 1;
    border-radius: var(--Radius-SM, 4px);
    border: 1px solid var(--Neutral-700, #495057);
    background: var(--Neutral-800, #343A40) url(../images/video/editor/i_copy_neutral_500.svg) 50% / contain no-repeat;
    background-size: 18px 18px;
    cursor: pointer;
}
.popupWrap#sendQrModal .popupContent > section > .copyWrap > .copyBtn:hover {
    background: var(--Neutral-100, #F1F3F5) url(../images/video/editor/i_copy_neutral_900.svg) 50% / contain no-repeat;
    background-size: 18px 18px;
}
.popupWrap#sendQrModal .popupContent > section > .copyWrap > .copyBtn:hover:before {
    content: '복사하기';
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: var(--Radius-SM, 4px);
    background: var(--Neutral-900, #212529);
    position: absolute;
    bottom: 0;
    transform: translateY(48px);
}
.popupWrap#sendQrModal .popupContent > section > .copyWrap > .copyBtn:hover:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid var(--Neutral-900, #212529);
    position: absolute;
    cursor: default;
    bottom: 0;
    transform: translateY(14px);
}
/* sendQrModal tooltip end */





.subTitleWeight {
    color: var(--Primary-500, #6C5CE7);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
    display: contents;
}
.subTitleContentWrap {
    display: inline-block;
    margin-top: 4px;
    line-height: 160%;
}
.subTitleContentWrap b {
    display: contents;
}

/* 약관동의 */
.popupWrap#videoCopyright .popupBody {gap: 16px; max-width: 480px;}



/*로딩바 START*/
#indicator {
    display: none;
}
#indicator .backdrop {
    position: fixed;
    top: 0;
    left: 0;
    /*z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;*/
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    opacity: 0.5;
    z-index: 5;
}
#indicator .backdrop.fade {
    opacity: 0;
}
#indicator .backdrop.show {
    opacity: 0.5;
}
#indicator .indicatorWrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .3);
    z-index: 5000;
    transition: .3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: visible;
    opacity: 1;
}
#indicator .indicatorWrap.show > div {
    /*transform: translateY(0);*/
    z-index: 2;
}
#indicator .indicatorWrap .indicatorBody {
    width: 300px;
    display: inline-flex;
    padding: 24px 24px 40px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    border-radius: 16px;
    border: 1px solid #E9ECEF;
    background: #FFF;
    box-shadow: 0 10px 15px 0 rgba(108, 92, 231, 0.10);
}
#indicator .indicatorWrap .title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /*gap: 4px;*/
}
#indicator .indicatorWrap .title > p {
    color: var(--Neutral-900, #212529);
    font-size: 20px;
    font-weight: 700;
    line-height: 140%;
}
#indicator .indicatorWrap .subTitle {
    color: var(--Neutral-700, #495057);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    display: inline-block;
    margin-top: -20px;
}
#indicator .indicatorWrap .contents {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    align-items: center;
}
#indicator #loadingLottie {
    width: 32px;
    height: 32px;
    aspect-ratio: 1/1;
    z-index: 15;
}
/*로딩바 END*/