@charset "utf-8";
/* @import "./template.css"; */

body {
    /* detail common */
    --k-detail-layout-space: 72px;
}


.detail-group-wrap {min-height: 100vh; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; margin: var(--k-gnb-height) 0 0;}
/* @media screen and (max-width: 1024px) {
    .detail-group-wrap {min-height: 100vh;}
} */
/* .sub-cnt .detail-group {} */
.detail-group {display: flex; align-items: flex-start; justify-content: center; position: relative; width:1400px; margin:10px var(--k-layout-padding) 0;}
/* .detail-group {overflow: hidden; position: relative; width:1400px; margin:0 var(--k-detail-layout-space);} */

.detail-header {margin: 0 0; display: flex; flex-direction:row;}
.detail-header .item-info {display: flex; flex-direction:column; align-items: center;}


.detail-header .item-name {display: flex; align-items: center; font-size: 16px; letter-spacing:0; font-weight: 500; color: #0d0c22; font-family: Haas Grot Text R Web; text-transform: capitalize;}
.detail-header .item-name > :first-child > img {width: 48px; height: 48px; overflow: hidden; border-radius: 50%; margin-right: 16px; vertical-align: top;}
.detail-header .item-name > div {flex: 1;}

.detail-header .item-author {display: flex; align-items: center; margin-top: 5px; font-weight: 400; font-size: 14px; text-transform: capitalize; color:#191919}
.detail-header .item-author > div {} 
.detail-header .item-author > div ~ div::before {display:inline-block; content:"•"; margin: 0 6px; font-size: 12px;} 

.detail-header .item-count {position: relative; display: flex; align-items: center; font-size: 12px; margin-left: auto;}
.detail-header .item-count > :first-child ~ span,
.detail-header .item-count > :first-child ~ button {margin-left:8px}
.detail-header .item-count .k-btn-round-edge {border-radius: 8px;}

.detail-header .item-count .btn-item-count-likes {padding: 9px 10px 9px; transition: all 0.3s;}
.detail-header .item-count .item-count-likes {position: relative;}
.detail-header .item-count .item-count-likes .svg-icon {width: 20px; height: 20px; vertical-align: top; overflow: visible;}
.detail-header .item-count .item-count-likes .svg-icon path {fill: #ea4c4c;}

.detail-header .item-count .btn-item-count-likes .item-count-likes .svg-icon path:nth-child(1) {opacity: 1;}
.detail-header .item-count .btn-item-count-likes .item-count-likes .svg-icon path:nth-child(2) {opacity: 0; transform: scale(0.2); transform-origin: center;}

.detail-header .item-count .item-count-likes .text {margin-left: 6px; color:#656572; display: none;}
.detail-header .item-count .k-btn-lightgray.btn-item-count-likes .svg-icon path {fill: #ea4c4c;}

.detail-header .item-count .btn-item-count-likes.active .item-count-likes .svg-icon path:nth-child(1) {opacity: 0;}
.detail-header .item-count .btn-item-count-likes.active .item-count-likes .svg-icon path:nth-child(2) {opacity: 1; transform: none; transition: all 0.5s cubic-bezier(0.3, 2.8, 0.6, 0.5);}
.detail-header .item-count .item-count-likes .spinner-loader {position: absolute; top:0; left:0;}

.detail-header .item-count .btn-item-count-comments {padding: 11px 12px 11px; /*box-shadow: 0px 0px 0px 1px #e7e7e9 inset;*/}
.detail-header .item-count .item-count-comments {display: flex; align-items: center; line-height: 1; font-family: Poppins, 'Nunito Sans', Noto Sans KR;}
.detail-header .item-count .item-count-comments .svg-icon {width: 16px; height: 16px; vertical-align: top}
.detail-header .item-count .item-count-comments .svg-icon path {fill: #111;}
.detail-header .item-count .item-count-comments .text {margin-left: 6px; color:#656572; font-weight: normal; display: none;}

.detail-header .item-price-block {display: flex; margin-top: 15px;}
.detail-header .item-price-block .item-price {font-size: calc((1.4 - 1) * 1.2vw + 1rem); color: #111111; font-weight: bold;}
.detail-header .item-price-block .item-price-market {font-size: calc((1.1 - 1) * 1.2vw + 1rem); align-self: center; margin-left: 10px; color: #8d8c8c; text-decoration: line-through;}
.detail-header > a:hover .img .img-inner img {transform: scale3d(1.05, 1.05, 1);}
.detail-header > a:hover .badge{background-color: #000; color: #fff;}



/* .detail-cont .item-explain {margin-top: 15px; line-height: 1.3;} */

.detail-block-img {overflow: hidden; border-radius: 10px;}
.detail-block-img img {min-width: 100%; vertical-align: top; transition: all 0.15s linear;}
.detail-block-img ~ div {margin: 50px 0;}

.detail-cont {flex: 1;}
/* .fd-offset-top .detail-info {position: fixed; top: calc(var(--k-gnb-height) - 30px);} */
.detail-info-wrap {z-index: 1; display:none; width: 0; margin-left: 30px; min-height: 110%;}
.detail-info-wrap.active {display: block; width: 380px; animation:detail-info-wrap-open 0.7s ease;}
.detail-info-wrap.active.inactive {animation:detail-info-wrap-close 0.7s ease;}
@keyframes detail-info-wrap-open {
    from {width: 0;}
    to {width: 380px;}
}
@keyframes detail-info-wrap-close {
    from {width: 380px;}
    to {width: 0;}
}


.detail-info {/*transition: all 0.2s;*/ font-size:14px; position: relative; width: 380px; border-radius: 3px;}
/* .fd-offset-top.detail-info {position: fixed; top: calc(var(--k-gnb-height) - 30px);} */
.detail-info.fixed {position: fixed;}


.detail-info-wrap .detail-info {transform:translateX(100%);}
.detail-info-wrap.active .detail-info {transform:translateX(0); animation:detail-info-open 0.7s ease;}
.detail-info-wrap.active.inactive .detail-info {animation:detail-info-close 0.5s ease-in-out;}
@keyframes detail-info-open {
    from {transform:translateX(100%);}
    to {transform:translateX(0);}
}
@keyframes detail-info-close {
    from {transform:translateX(0);}
    to {transform:translateX(100%);}
}

.detail-info .svg-icon {width: 16px; height: 16px; vertical-align: top;}
.detail-info .detail-info-toolbar {min-height: 48px; margin: 0 0 25px; display: flex; align-items: center;}
.detail-info .detail-info-toolbar .title {margin-top: 13px; font-size: 22px; letter-spacing:0; font-weight: 500; color: #0d0c22; font-family: Haas Grot Text R Web; text-transform: capitalize;}
.detail-info .detail-info-toolbar .btns {display: flex; align-items: center; margin-left: auto;}
.detail-info .detail-info-toolbar .btns > :first-child ~ button {margin-left:8px}
.detail-info .detail-info-toolbar .btns .k-btn-icon {padding-left: 12px; padding-right: 12px; border-radius: 8px;}


.detail-info .detail-info-cont {/*flex: 1;*/ overflow-x:hidden; overflow-y:auto; will-change:scroll-position; -webkit-overflow-scrolling:auto; -ms-overflow-style: none; box-shadow: 0 2px 4px -1px rgb(0 0 0 / 6%), 2px 6px 13px 0 rgb(0 0 0 / 7%); background-color: #fff;}
.detail-info .detail-info-cont::-webkit-scrollbar{-webkit-appearance:none;width:10px}
.detail-info .detail-info-cont::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(116, 113, 117, 0.6);-webkit-box-shadow: 0 0 1px rgba(116, 113, 117, 0.6)}




.detail-comments {padding-bottom: 15px;}
.detail-comments-list {
    font-family: Haas Grot Text R Web, 'Nunito Sans', Noto Sans KR;
    overflow-x:hidden; overflow-y:auto; will-change:scroll-position; -webkit-overflow-scrolling:auto;
    padding-bottom: 25px;
    min-height: 40vh;
    max-height: 40vh;
}
.detail-comments-list::-webkit-scrollbar{-webkit-appearance:none;width:10px}
.detail-comments-list::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(116, 113, 117, 0.6);-webkit-box-shadow: 0 0 1px rgba(116, 113, 117, 0.6)}


.detail-comments-list > .item {position: relative; margin: 40px 30px; display: flex; flex-direction:row;}
.detail-comments-list > .item > :first-child > img {width: 46px; height: 46px; overflow: hidden; border-radius: 50%; margin-right: 16px; vertical-align: top;}
.detail-comments-list > .item > .item-info {flex: 1; margin-top: 3px;}
.detail-comments-list > .item > .item-info .item-name {display: flex; align-items:center; color: #3c3c3c; font-size: 14px; font-weight: 500;}
.detail-comments-list > .item > .item-info .item-name .time-ago {color: #b5b5b5; font-size: 12px; font-weight: normal;}
/* .detail-comments-list > .item > .item-info .item-name .item-btn-reply {color: #b5b5b5; font-size: 12px; font-weight: 300; margin-left: 16px;} */
.detail-comments-list > .item > .item-info .item-name .time-ago::before {display:inline-block; content:"•"; margin: 0 6px; font-size: 12px;}
.detail-comments-list > .item > .item-info .item-content {margin-top: 6px; color: #484848; font-size: 14px; line-height: 1.4;}
.detail-comments-list > .item > .item-info .item-btns {position: absolute; top: 0; right: 0;}

.detail-comments-list > .item > .item-info .list {display: none; z-index: 1; position: absolute; top: 28px; left: 100%; transform: translateX(-95%); width: 130px; /*border:1px solid #e5e5e5;*/ padding: 7px 0; border-radius: 6px; background-color: rgba(255,255,255,1); transition: all 0.5s ease-in-out; box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 2px 6px 16px 0 rgba(0,0,0,0.1);}
.detail-comments-list > .item > .item-info .list nav {margin-top: 0;}
.detail-comments-list > .item > .item-info .list a {display: block; padding: 5px 25px; line-height: 1.6; font-size: 14px; font-weight: 400;}
.detail-comments-list > .item > .item-info .list .triangle {overflow: hidden; position: absolute; top:-8px; left:86%; transform: translateX(-50%); width: 14px; height: 8px;}
.detail-comments-list > .item > .item-info .list .triangle::before {position: absolute; top:4px; left:2px; display: block; line-height: 0; font-size: 0; content:''; width: 8px; height: 8px; transform: rotate(-135deg); border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; background-color: rgba(255,255,255,1);}
.detail-comments-list > .item > .item-info .list a:hover {background: #f6f6f6;}
.detail-comments-list > .item > .item-info .list a .svg-icon {vertical-align: middle; margin-top: -4px; margin-right: 5px;}
.detail-comments-list > .item > .item-info .list a .svg-icon-report {width: 14px;}
.detail-comments-list > .item > .item-info .list a .svg-icon-report path {fill: #7b7b7b;}
.detail-comments-list > .item > .item-info .list a .svg-icon-reply {width: 18px; margin-left: -1px; margin-right: 2px;}
.detail-comments-list > .item > .item-info .list a .svg-icon-trash {width: 16px; margin-left: -1px; margin-right: 4px;}

.detail-comments-list > .item > .item-info .item-btns:hover .list,
.detail-comments-list > .item > .item-info .item-btns .item-comments-ellipsis:focus ~ .list {display: block;}

/* todo: apply */
/* .detail-comments-list > .item:nth-last-child(2) > .item-info .list {top: auto; bottom: 100%;}
.detail-comments-list > .item:nth-last-child(2) > .item-info .list .triangle {top:auto; bottom:-8px;}
.detail-comments-list > .item:nth-last-child(2) > .item-info .list .triangle::before {top:auto; bottom:4px; transform: rotate(-315deg); border-right: 1px solid transparent; border-bottom: 1px solid transparent;}
.detail-comments-list > .item:nth-child(-n+11) > .item-info .list {top: 28px; bottom: auto;}
.detail-comments-list > .item:nth-child(-n+11) > .item-info .list .triangle {top:-8px; bottom:auto;}
.detail-comments-list > .item:nth-child(-n+11) > .item-info .list .triangle::before {top:4px; bottom:auto; transform: rotate(-135deg); border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;} */



.reply-list > .item {position: relative; margin: -20px 30px 40px; display: flex; flex-direction:row; flex-wrap: wrap;}
.reply-list > .item .item {position: relative; margin-top: 20px; display: flex; flex-direction:row; flex-wrap: wrap; width: 100%;}
.reply-list .item > :first-child {margin-left: 22px;}
.reply-list .item > :first-child > img {width: 24px; height: 24px; overflow: hidden; border-radius: 50%; margin-right: 16px; vertical-align: top;}
.reply-list .item > .item-info {flex: 1; margin-top: 3px;}
.reply-list .item > .item-info .item-name {display: flex; align-items:center; color: #3c3c3c; font-size: 14px; font-weight: 500;}
.reply-list .item > .item-info .item-name .time-ago {color: #b5b5b5; font-size: 12px; font-weight: normal;}
.reply-list .item > .item-info .item-name .time-ago::before {display:inline-block; content:"•"; margin: 0 6px; font-size: 12px;} 
.reply-list .item > .item-info .item-content {margin-top: 6px; color: #484848; font-size: 14px; line-height: 1.4;}
.reply-list .item > .item-info .item-btns {position: absolute; top: 0; right: 0;}
.reply-list .item > .item-info .item-btns .item-comments-ellipsis .svg-icon path {fill: #ff5ebc;}

.reply-list .item > .item-info .list {display: none; z-index: 1; position: absolute; top: 28px; left: 100%; transform: translateX(-95%); width: 130px; /*border:1px solid #e5e5e5;*/ padding: 7px 0; border-radius: 6px; background-color: rgba(255,255,255,1); transition: all 0.5s ease-in-out; box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 2px 6px 16px 0 rgba(0,0,0,0.1);}
.reply-list .item > .item-info .list nav {margin-top: 0;}
.reply-list .item > .item-info .list a {display: block; padding: 5px 25px; line-height: 1.6; font-size: 14px; font-weight: 400;}
.reply-list .item > .item-info .list .triangle {overflow: hidden; position: absolute; top:-8px; left:86%; transform: translateX(-50%); width: 14px; height: 8px;}
.reply-list .item > .item-info .list .triangle::before {position: absolute; top:4px; left:2px; display: block; line-height: 0; font-size: 0; content:''; width: 8px; height: 8px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; background-color: rgba(255,255,255,.85);}
.reply-list .item > .item-info .list a:hover {background: #f6f6f6;}
.reply-list .item > .item-info .list a .svg-icon {vertical-align: middle; margin-top: -4px; margin-right: 5px;}
.reply-list .item > .item-info .list a .svg-icon-report {width: 14px;}
.reply-list .item > .item-info .list a .svg-icon-report path {fill: #7b7b7b;}
.reply-list .item > .item-info .list a .svg-icon-reply {width: 18px; margin-left: -1px; margin-right: 2px;}
.reply-list .item > .item-info .list a .svg-icon-trash {width: 16px; margin-left: -1px; margin-right: 4px;}

.reply-list .item > .item-info .item-btns:hover .list,
.reply-list .item > .item-info .item-btns .item-comments-ellipsis:focus ~ .list {display: block;}


.detail-comments-image {margin: 30px; min-height: 96px; display: flex; align-items:center; justify-content: center; text-align: center; }




.detail-comments-form {margin: 30px;}
.detail-comments-form .comment-textareabox {}
.detail-comments-form .comment-textarea {position: relative; display: block; width: 100%; height: 110px; padding: 10px; margin: 0; line-height: 1.3; border: 1px solid #ccc; border-radius: 3px; resize: none; scroll-padding-block: 3px; transition: all 0.15s ease-out;}
.detail-comments-form .comment-textarea:hover,
.detail-comments-form .comment-textarea:focus {border-color: #696969;}
.detail-comments-form .comment-textarea:disabled {border-color: #ccc;}

.detail-comments-form .comment-action {margin-top: 10px; text-align: right; }
.detail-comments-form .comment-action .k-btn {/*padding: 11px 14px 10px;*/ padding: 0 14px; height: 36px; width: 80px;}

.detail-reply-form {margin: -20px 30px 30px 92px;}
.detail-reply-form .reply-textarea {position: relative; display: block; width: 100%; height: 60px; padding: 10px; margin: 0; line-height: 1.3; border: 1px solid #ccc; border-radius: 3px; resize: none; scroll-padding-block: 3px; transition: all 0.15s ease-out;}
.detail-reply-form .reply-textarea:hover,
.detail-reply-form .reply-textarea:focus {border-color: #dd579f;}
.detail-reply-form .reply-action {margin-top: 10px; text-align: right; }
.detail-reply-form .reply-action .k-btn {padding: 0 14px; height: 36px; width: 80px; line-height: 1.3;}


/* .detail-info .btn-item-comments-ellipsis {} */
.detail-info .item-comments-ellipsis {padding: 5px 5px 8px 30px; line-height: 1;}
.detail-info .item-comments-ellipsis .svg-icon {width: 16px; height: 16px; vertical-align: top;}
.detail-info .item-comments-ellipsis .svg-icon path {fill: #694be7;}

.detail-info .btn-item-comments-open .svg-icon {width: 16px; height: 16px; vertical-align: top;}
.detail-info .btn-item-comments-open .svg-icon path {fill: #694be7;}
.detail-info .btn-item-comments-lock .svg-icon {width: 16px; height: 16px; vertical-align: top;}
.detail-info .btn-item-comments-lock .svg-icon path {fill: #111;}

.detail-info-close {position:absolute; z-index:10; top:80px; left:-20px; width:40px; height:40px; background-color: #fff; border-radius: 50%; box-shadow: 0px 0px 0px 1px #e7e7e9 inset; transition: all 300ms ease;}
.detail-info-close:hover,
.detail-info-close:focus {box-shadow: 0px 0px 0px 1px #bdb5bb inset; background-color: #f3f3f4;}
.detail-info-close::before,
.detail-info-close::after {display:inline-block; content:""; display:block; position:absolute; top:19px; left:12px; height:2px; width: 40%; background-color:#9e9ea7; font-size:0; line-height:0; transform: rotate(0); transition:all 0.2s ease-out;}
.detail-info-close::before {transform: rotate(45deg);}
.detail-info-close::after {transform: rotate(-45deg);}
.detail-info .detail-info-close:hover::before,
.detail-info .detail-info-close:hover::after {background-color:#111;}
/* .k-dialog.active .k-dialog-close::before {top:19px; transform: rotate(45deg);}
.k-dialog.active .k-dialog-close::after {top:19px; transform: rotate(-45deg);} */
.btn-detail-info-close {}


/* @media screen and (max-width: 1479px) {

} */
@media screen and (max-width: 1365px) {

}
@media screen and (max-width: 1024px) {
    .detail-info-wrap {position: absolute; right: 0;}
    .detail-info {}
    /* .detail-info .detail-info-cont {} */
    .detail-info .detail-info-toolbar {padding-left: 30px;}
    
}
@media all and (min-width: 768px) and (max-width:1024px) {
    /* .detail-info-wrap {pointer-events: none;} */
    /* .detail-info .detail-info-cont {pointer-events: auto;} */
    /* .detail-info-close {pointer-events: auto;} */
}
@media screen and (max-width: 767px) {
    .noscroll-mobile {overflow:hidden; height:100%;} 

    .detail-info-wrap {position: fixed; top:0; right: 0; left:0; margin-left: 0; width: auto; background-color: #fff;}
    .detail-info-wrap.active {width: 100%; /*animation: none;*/}
    .detail-info-wrap.active.inactive { /*animation: none;*/}
    @keyframes detail-info-wrap-open {
        from {width: 100%; background-color: transparent;}
        to {width: 100%; background-color: #fff;}
    }
    @keyframes detail-info-wrap-close {
        from {width: 100%; background-color: #fff;}
        to {width: 100%; background-color: transparent;}
    }

    .detail-info {padding-top: var(--k-gnb-height); width: 100%; background-color: #fff;}
    .detail-info .detail-info-cont {
        height:  calc( 100vh - var(--k-gnb-height) - 98px);
        box-shadow:none;
    }
    .detail-comments-list {
        min-height:auto;
        max-height:none;
    }
    .detail-info-close {top: calc(var(--k-gnb-height) + 35px); left: auto; right: 30px; }
    .detail-info .detail-info-toolbar {padding-right: 30px;}

}




.signin-group-wrap {position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: var(--k-gnb-height) 0 var(--k-gnb-height); min-height: 100vh; font-family: Poppins, 'Nunito Sans', Noto Sans KR; line-height: 1.6; word-break: keep-all; background: url(../../images/content/login/ClaudeMonet298128.webp) no-repeat center center / contain; background-size: cover;}
.signin-group-wrap::before {content:''; display: block; position: absolute; z-index: 0; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.9)); opacity: 0.3;}
.signin-group {min-height: 500px; display: flex; align-items: center; position: relative; width:1366px; margin:0 var(--k-layout-padding) 0;}
.signin-group .signin-title {flex: 1; display: flex; justify-content: center;}
.signin-group .signin-title h2 {max-width: 540px; overflow: hidden; font-size: calc(2.5 * 1rem); line-height: calc(1.4 * (1 + (1 - 4)/25)); font-weight: bold; color: #fff;}
.signin-group .signin-title .txt-source { position: absolute; left: 20px; bottom: -50px; font-size: 24px; font-weight: bold; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(90deg,#5363fd,#fff 45%,#fff 76%,#fff); background-color: #000 0%;}
/* .signin-group .signin-title .txt-link {margin-top: 30px;} */


.signin {width:500px; padding: 50px; border-radius: 6px; background-color: #fff; box-shadow: 0 2px 4px -1px rgb(0 0 0 / 6%), 2px 6px 13px 0 rgb(0 0 0 / 7%);}
.signin > .title {color: #0e081e; font-size: 18px; font-weight: 600;}


@media (max-height: 670px) {
    .signin-group-wrap { min-height: 670px;}
}
div.signup-form .k-form-input {border-color: #cbb1e2; background-color: #fff;}
.signin-formbox {margin-top: 20px;}
.signin-formbox .k-text-field-label {display: flex; align-items: center; padding: 7px 0;}
.signin-formbox .k-text-field-label a {margin-left: auto; font-weight: normal; color: #694be7;}
.signin-formbox .k-form-input {margin-bottom: 20px;}
.signin-formbox .k-form-text {margin-top: 20px; text-align: center; font-size:15px}
.signin-formbox .k-form-text a {margin-left: 5px; color: #694be7;}
.signin .k-input-error {border-color: #fac5dc; background-color: #fff; transition: all 0.2s;}
.signin .k-input-error:focus {border-color: #e179a7}

.signin-formbox .svg-icon {width: 20px; height: 20px; vertical-align: top}
.signin-formbox .svg-icon path {fill: #0e081e;}
.k-text-field-putin-btn {position: relative;}
.k-text-field-putin-btn .k-btn-icon {position: absolute; right: 2px; top: 40px;}
.signin-formbox .btn-password-show {border-color: transparent; background-color: transparent;}
.signin-formbox .btn-password-show path {fill: #785ac9;}
.signin-formbox .btn-password-show .svg-icon:last-child {display: none;}
.signin-formbox .btn-password-show.active .svg-icon:first-child {display: none;}
.signin-formbox .btn-password-show.active .svg-icon:last-child {display: block;}



.signin .k-text-chk .k-checkbox,
.signin .k-text-chk .k-radio {}
.signin .k-checkbox,
.signin .k-radio {display: block; margin:0 0 8px 0; background: #fff; color:#000; text-align: left; line-height: 1.3rem; cursor: pointer;}
.signin .k-checkbox svg path,
.signin .k-radio svg path {stroke: #7352ff;}
.signin .k-checkbox svg, .signin .k-radio svg {left: 5px; margin-top:-8px; width: 14px; height: 14px;}
.signin .k-checkbox label, .signin .k-radio label {width: 100%; font-size: 15px; padding: 2px 0 0 32px;}
.signin .k-checkbox input[type="checkbox"],
.signin .k-radio input[type="radio"],
.signin .k-checkbox label::before, .signin .k-radio label::before {width: 24px; height: 24px; border-width: 2px;}
.signin .k-checkbox .k-input-error ~ label::before,
.signin .k-checkbox .k-radio label::before {border-color: #e81887;}
.signin .k-checkbox input[type="checkbox"]:checked ~ label::before,
.signin .k-radio input[type="radio"]:checked ~ label::before { border-color: #8062ff;}

/* .k-form-submit-wrap {display: flex; align-items: center;}
.k-form-submit-wrap > p {position: relative;} */
.signin .k-form-submit {display: flex; align-items: center; margin-top: 20px; width: 100%;}
.signin .k-form-submit > .k-btn {font-size: 17px; line-height: 18px; font-weight: bold; letter-spacing: 0;}

.signup {width:540px;}



.sns-login {margin-top:30px;}
.sns-login .tit {position:relative; color:rgb(124, 124, 125);; line-height:1; font-size:15px; font-weight: normal; letter-spacing:-0.26px; text-align:center;}
.sns-login .tit::before {display:block; content:""; position:absolute; left:0; right:0; top:50%; margin-top:-1px; width:100%; height:1px; background:#dedede;}
.sns-login .tit > span {position:relative; z-index:1; display: inline-block; padding: 0 14px; background-color: #fff;}
.sns-login > .sns-nav {position:relative; padding:28px 0 20px; display:flex; justify-content: center;}
.sns-login > .sns-nav::after {content:''; display:block; clear:both;}
.sns-login > .sns-nav strong {font-weight: bold;}
.sns-login > .sns-nav > a {float:left; width:110px; position:relative; display:block; padding:60px 0 0; line-height:1.2; font-size:15px; letter-spacing:-0.42px; color:#4c4c4c; text-align:center; text-transform: capitalize;}
.sns-login > .sns-nav > a::before {display:block; content:""; position:absolute; top:0; left:50%; margin-left:-25px; width:50px; height:50px; vertical-align:top; background-position:50% 50%; background-repeat:no-repeat; background-size:20px; border-radius:50%;}
.sns-login > .sns-nav > .btn-sns-google::before {box-shadow: 0px 0px 0px 1px #e7e7e9 inset; background-color:#fff; background:#fff url(../../images/common/ico/icon_goog.svg) no-repeat center center / 26px;}
/* .sns-login > .sns-nav > .btn-sns-kakao::before {} */
/* .sns-login > .sns-nav > .btn-sns-facebook::before {} */
.sns-login > .sns-nav > .btn-sns-apple::before {background-color:#000; background:#000 url(../../images/common/ico/icon_apple.svg) no-repeat center 47% / 18px; }

@media screen and (max-width: 1024px) {
    .signin-group .signin-title h2 {font-size: calc(2 * 1rem); line-height: calc(1.4 * (1 + (1 - 4)/25));}
}
@media screen and (max-width: 767px) {
    .signin-group-wrap {
        padding-bottom: 0; min-height: auto;
    }
    .signin-group {
        min-height: auto;
        flex-direction: column;
        width: 100%;
        margin: 0;
    }
    .signin-group .signin-title {display: none;}
    .signin {width: 100%; padding: 50px 30px; border-radius: 0; box-shadow: none;}
}






.builder-group-wrap {min-height: 100vh; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; padding: var(--k-gnb-height) 0 0;}
.sub-cnt .builder-group {}
.builder-group {word-break: keep-all; display: flex; align-items: flex-start; justify-content: center; position: relative; width:1400px; margin:0 var(--k-layout-padding);}

.builder-header {margin: 25px 0; }
.builder-header .builder-header-action {display: flex; align-items: center;}
.builder-header .builder-header-action {z-index: 10; position:fixed; left:var(--k-layout-padding); right:var(--k-layout-padding);}
/* .builder-header .builder-header-action.fixed {left:var(--k-layout-padding); right:var(--k-layout-padding);} */
.builder-header .builder-header-action.fixed {left:var(--k-layout-padding); right:var(--k-layout-padding);}
/* .builder-header .builder-header-action.fixed .btns {margin-left: 20px;} */
.builder-header-action .links {}
.builder-header-action .btns { display: flex;
    align-items: center;
    margin-left: auto;}
    .builder-header-action .btns .k-btn {margin-left: 6px;}
.builder-header-action .btn-builder-nav-toggle {padding: 8px 10px 8px; color: #694be7;}
.builder-header-action .btn-builder-nav-toggle .path-1 {display: block;}
.builder-header-action .btn-builder-nav-toggle .path-2 {display: none;}
.builder-header-action .btn-builder-nav-toggle.active .path-1 {display: none;}
.builder-header-action .btn-builder-nav-toggle.active .path-2 {display: block;}




.builder-cont {flex: 1;}
.builder-nav-wrap {/*position: fixed; right: 0;*/ display:none; width: 0; margin-left: 30px; min-height: 110%;}
.builder-nav-wrap.active {display: block; width: 380px; animation:builder-nav-wrap-open 0.3s ease;} 
.builder-nav-wrap.active.inactive {width: 0; animation:builder-nav-wrap-close 0.3s;}
/* or Unchecked transition, Checked transition - remove display:none */
/* .builder-nav-wrap {width: 0; margin-left: 30px; min-height: 110%; transition: width 0.7s ease;}
.builder-nav-wrap.active {width: 380px; transition: width 0.7s ease;}  */
@keyframes builder-nav-wrap-open {
    from {width: 0;}
    to {width: 380px;}
}
@keyframes builder-nav-wrap-close {
    from {width: 380px;}
    to {width: 0;}
}

.builder-nav-wrap.shake .builder-nav .builder-nav-body {animation:builder-nav-shake 0.5s ease;}
@keyframes builder-nav-shake {
	0% {
		transform: translateX(0);
	}
	5% {
		transform: translateX(-4px);
	}
	15% {
		transform: translateX(4px);
	}
	25% {
		transform: translateX(-4px);
	}
	35% {
		transform: translateX(4px);
	}
	45% {
		transform: translateX(-4px);
	}
	55% {
		transform: translateX(4px);
	}
	65% {
		transform: translateX(-4px);
	}
	75% {
		transform: translateX(3px);
	}
	85% {
		transform: translateX(-3px);
	}
	100% {
		transform: translateX(0);
	}
}

.builder-nav.active-2-level {width: 480px;}
.builder-nav {z-index: 10; position: fixed; top: var(--k-gnb-height); right: var(--k-layout-padding); bottom: var(--k-layout-padding); transition: width 0.3s; font-size:14px; width: 380px; border-radius: 3px; margin-top: 85px; box-shadow: 0 2px 4px -1px rgb(0 0 0 / 6%), 2px 6px 13px 0 rgb(0 0 0 / 7%); background-color: #fff;}
/* .fd-offset-top.builder-nav {position: fixed; top: calc(var(--k-gnb-height) - 30px);} */
/* .builder-nav.fixed {position: fixed;} */

.builder-nav-wrap .builder-nav {transform:translateX(100%); }
.builder-nav-wrap.active .builder-nav {transform:translateX(0); animation:builder-nav-open 0.3s ease;}
.builder-nav-wrap.active.inactive .builder-nav {animation:builder-nav-close 0.3s ease-in-out;}
@keyframes builder-nav-open {
    from {transform:translateX(100%);}
    to {transform:translateX(0);}
}
@keyframes builder-nav-close {
    from {transform:translateX(0);}
    to {transform:translateX(100%);}
}


.builder-nav .builder-nav-toolbar {min-height: 48px; margin: 25px 0; display: flex; align-items: center;}
.builder-nav .builder-nav-toolbar .title {margin-top: 13px; font-size: 22px; letter-spacing:0; font-weight: 500; color: #0d0c22; font-family: Haas Grot Text R Web; text-transform: capitalize;}
.builder-nav .builder-nav-toolbar .btns {margin-left: auto;}


/* .builder-nav .builder-nav-cont {overflow-x:hidden; overflow-y:auto; will-change:scroll-position; -webkit-overflow-scrolling:auto; -ms-overflow-style: none; box-shadow: 0 2px 4px -1px rgb(0 0 0 / 6%), 2px 6px 13px 0 rgb(0 0 0 / 7%); background-color: #fff;}
.builder-nav .builder-nav-cont::-webkit-scrollbar{-webkit-appearance:none;width:10px}
.builder-nav .builder-nav-cont::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(116, 113, 117, 0.6);-webkit-box-shadow: 0 0 1px rgba(116, 113, 117, 0.6)} */


.builder-nav .builder-nav-body { position: absolute; top:0; left:0; right:0; bottom:0; padding: 30px; overflow-x:hidden; overflow-y:auto; will-change:scroll-position; -webkit-overflow-scrolling:auto; -ms-overflow-style: none; }
.builder-nav .builder-nav-body::-webkit-scrollbar{-webkit-appearance:none;width:10px}
.builder-nav .builder-nav-body::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(116, 113, 117, 0.6);-webkit-box-shadow: 0 0 1px rgba(116, 113, 117, 0.6)}




/* .builder-nav-action {} */
.builder-nav-action {min-height: 30px; padding: 0 25px; margin: 0 0 0; display: flex; align-items: center;}
.builder-nav-action .btns {}


/* .detail-info .svg-icon {width: 16px; height: 16px; vertical-align: top;}
.detail-info .detail-info-toolbar {min-height: 48px; margin: 25px 0; display: flex; align-items: center;} */
.builder-nav-body .title {margin-top: 13px; padding-bottom: 20px; font-size: 22px; letter-spacing:0; font-weight: 500; color: #0d0c22; text-transform: capitalize;}
.builder-nav-body .title > svg:first-child {margin-right: 0; width: 22px; height: 22px; vertical-align: -3px;}



.builder-nav-close {position:absolute; z-index:10; top:10px; left:-20px; width:40px; height:40px; background-color: #fff; border-radius: 50%; box-shadow: 0px 0px 0px 1px #e7e7e9 inset; transition: all 300ms ease;}
.builder-nav-close:hover,
.builder-nav-close:focus {box-shadow: 0px 0px 0px 1px #bdb5bb inset; background-color: #f3f3f4;}
.builder-nav-close::before,
.builder-nav-close::after {display:inline-block; content:""; display:block; position:absolute; top:19px; left:12px; height:2px; width: 40%; background-color:#9e9ea7; font-size:0; line-height:0; transform: rotate(0); transition:all 0.2s ease-out;}
.builder-nav-close::before {transform: rotate(45deg);}
.builder-nav-close::after {transform: rotate(-45deg);}
.builder-nav .builder-nav-close:hover::before,
.builder-nav .builder-nav-close:hover::after {background-color:#111;}





/* builder */
.builder-edit-element {}
.builder-edit-element.builder-edit-media {display: flex; justify-content: center; overflow: hidden;}
.builder-container {padding-top: 10px; padding-bottom: 100px;}
.builder-container .img {vertical-align: middle;}
.builder-edit-container {} /* only edit */
.builder-container h2 {font-size: 32px; font-weight: 700; line-height: 38px; font-family: Poppins, 'Nunito Sans', Noto Sans KR;}
.builder-edit-container .builder-edit-section:last-child .insert-block-btn-container {opacity: 1;}
.builder-edit-container .builder-edit-section:last-child .insert-block-btn {border: 2px solid #cfcfcf; background: #fff; color: #c4c4c4;}
.builder-edit-container .builder-edit-section:last-child .button-text {color: #909090}
.builder-edit-container .builder-edit-section:last-child .insert-block-btn:hover {color: #694be7 !important; border: 2px solid #694be7 !important;}
.builder-edit-container .builder-edit-section:last-child .insert-block-btn:hover .button-text {color: #694be7 !important;}


.builder-edit-container .builder-edit-section .insert-block-btn-container.active {opacity: 1;}
.builder-edit-container .builder-edit-section .insert-block-btn-container.active .insert-block-btn {width:34px !important; padding: 4px !important; color: #694be7; border: 2px solid #694be7;}
.builder-edit-container .builder-edit-section .insert-block-btn-container.active .button-text {display: none !important; color: #694be7;}
.builder-edit-container .builder-edit-section .insert-block-btn-container.active .insert-block-btn:hover {width:auto !important; padding: 0 16px !important; color: #694be7 !important; border: 2px solid #694be7 !important;}
.builder-edit-container .builder-edit-section .insert-block-btn-container.active .insert-block-btn:hover .button-text {display: block !important; color: #694be7 !important;}


.builder-edit-container .builder-edit-section:last-child .insert-block-btn-collapsed,
.builder-edit-container .builder-edit-section .insert-block-btn-container.active .insert-block-btn-collapsed {width:auto; padding: 0 16px} 
.builder-edit-container .builder-edit-section:last-child .insert-block-btn-collapsed .button-text,
.builder-edit-container .builder-edit-section .insert-block-btn-container.active .insert-block-btn-collapsed .button-text {display:block;} 

.builder-edit-container [contenteditable="true"] {
    word-wrap: break-word;
    /* white-space: break-spaces; */
    white-space: normal;
}

.builder-edit-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    margin: 24px 0;
    -webkit-transition: max-width 200ms ease;
    transition: max-width 200ms ease
}

@media (min-width: 768px) {
    .builder-edit-section {
        width:100%;
        margin: 22px 0 0
    }
    .builder-edit-section:first-child {
        margin: 0;
    }
}

.builder-edit-block {
    position: relative;
    min-height: 32px;

    width: calc(100% - 32px);
    max-width: 990px;
    -webkit-transition: max-width 200ms ease;
    transition: max-width 200ms ease
}

/* :not(.shot-only)>.builder-edit-block:before { */
.builder-edit-block:before {
    content: "";
    position: absolute;
    top: -16px;
    right: -16px;
    bottom: -16px;
    left: -16px;
    transform: scale(1);
    transform-origin: center;
    transition: .15s cubic-bezier(.22,1,.36,1);
    border: 2px solid rgba(79,60,201,.3);
    border-radius: 12px;
    opacity: 0;
    pointer-events: none
}

.builder-edit-block.editing:before,
.builder-edit-block:hover:before {transform:scale(1); opacity: 1;}
.builder-edit-block.editing:before {border-color: #ea4c89}
/* @media (max-width: 767px) {
    .builder-edit-block.editing.is-full-width:before {
        top:-16px;
        right: 0;
        bottom: -16px;
        left: 0;
        border-radius: 0
    }
} */
.builder-edit-block.editing .builder-edit-element-menu {opacity: 1; height: auto;}
.builder-edit-element-menu {height: 0; overflow: hidden; transition: opacity 200ms ease; opacity: 0; z-index: 1; position: absolute; top: -16px; left: 75%;  transform:translate(-50%, -50%); display: inline-flex; flex-direction: row; padding: 4px; border-radius: 3px; background-color: #fff; box-shadow: 0 10px 35px rgba(0,0,0,.1)}
.builder-edit-element-menu .k-btn {padding: 8px;}
.builder-edit-element-menu .svg-icon {width: 16px; height: 16px;}
/* .builder-edit-element-menu .svg-icon path {fill: #694be7;} */
.builder-edit-element {position: relative; font-size: 18px; line-height: 32px;}
.builder-edit-element p {font-size: 18px; font-weight: 400; line-height: 32px;}
.builder-edit-element h2 {}
.builder-edit-element h3 {}
.builder-edit-element h2 + p,
.builder-edit-element h3 + p {margin-top: 14px;}
@media screen and (max-width: 1023px) {
    .builder-edit-element h2,
    .builder-edit-element h2 > * { font-size: calc((2 - 1) * 1.5vw + 1rem) !important; line-height: 1.4 !important;}
}




.insert-block-btn-container .svg-icon {width: 18px; height: 18px;}
.insert-block-btn-container {opacity: 0; transition: opacity 200ms ease; position: relative; display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 22px;}
.insert-block-btn-container .line {z-index: -1; position: absolute; top: 50%; transform: translateY(-50%); width: 200vw; height: 2px; background: #e0e0e0; border-radius: 2px; overflow: hidden;}
.hidden-insert-block-button .line {display: none;}
.insert-block-btn {display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; padding: 4px; transition: width .25s ease, padding .25s ease; transition-delay: -.1s; border: 2px solid #cfcfcf; border-radius: 88px; background: #fff; cursor: pointer; color: #c4c4c4;}
.button-text { display: none; flex: 0 0 auto; margin-left: 8px; font-size: 14px; font-weight: 400; line-height: 20px; color: #909090}
/* @media (min-width: 768px) { */
    .insert-block-btn {width:34px; height: 34px } 
    .insert-block-btn:hover {width:auto; padding: 0 16px; color: #694be7; border: 2px solid #694be7;}
    .insert-block-btn:hover .button-text {display:block; color: #694be7;} 
    .builder-edit-section:hover .insert-block-btn-container {opacity: 1;}

/* } */

.builder-menu {}
.builder-menu .nav {}
.builder-menu .nav > li {}
.builder-menu .nav>li a > svg:first-child {margin-right: 8px; width: 18px; height: 18px; vertical-align: top; margin-top: -1px;}

.builder-menu {display:none; position:relative; color:#0e0e19; font-size:16px; line-height:18px; font-weight: 400; letter-spacing:-0.48px;}
.builder-menu.active {display:block; animation:builder-nav-container-ani 0.3s ease;}
.builder-menu .nav {position:relative; height:100%; padding-top:20px;}
.builder-menu .nav::before {/*display:block; content:""; position:absolute; top:0; bottom:0; left:0; width:170px; background-color:rgba(255, 255, 255, 0.12);*/}
.builder-menu .nav>li ~ li {margin-top: 10px;}
.builder-menu .nav>li a {transition:all 0.3s; -webkit-transition:all 0.3s;}
.builder-menu .nav>li>:first-child,
.builder-menu .nav>li>a {position:relative; z-index:1; display:block; width:auto; padding:10px 20px 10px 9px; color:inherit; margin-left: -8px; margin-right: -8px; border-radius: 8px; transition: background .2s ease, width .2s ease;}
.builder-nav.active-2-level .builder-menu .nav>li>a {width:200px;}
.builder-menu .nav>li>a:hover {background-color: #f6f6f6;}
.builder-menu .nav>li:first-child > a {}
.builder-menu .nav>li.on>a {background:#f1ecff; color:#5329d2; font-weight:400;}
/* .builder-menu .nav>li.toggle>a::after {display:block; content:""; position:absolute; top:50%; right:9px; transform: translateY(-50%); width: 10px; height: 12px; background: url(../../images/common/icon_arrow_right.svg) no-repeat center / contain;} */
.builder-menu .nav>li>a .svg-arrow-right {position:absolute; top:50%; right:9px; transform: translateY(-50%); width: 10px; height: 12px;}



.builder-menu .nav>li>ul {display:none; position:absolute; top:20px; left:auto; right:0;}
/* .builder-menu .nav>li>ul::after {display:block; content:""; position:absolute; top:0; bottom:0; left:-160px; width:120px; background-color:#f7f7f7;} */
/* .builder-menu .nav>li:nth-child(2)>ul {top:122px;} */
.builder-menu .nav>li.on>ul {display:block; animation:builder-menu-ul-ani 0.7s ease;}
@keyframes builder-menu-ul-ani {
    from {opacity: 0;}
    to {opacity: 1;}
}

.builder-menu .nav>li>ul>li {}
.builder-menu .nav>li>ul>li ~ li {margin-top: 10px;}
.builder-menu .nav>li>ul[class^="type-"] {width: 200px;}
.builder-menu .nav>li>ul[class^="type-"]>li>a {font-size: 18px; font-weight:500; padding: 20px; border: 1px solid #f2f3f6; border-radius: 12px; box-shadow: 0 6px 14px rgb(0 0 0 / 0.06);}
.builder-menu .nav>li>ul[class^="type-"]>li ~ li {margin-top: 30px;}
.builder-menu .nav>li>ul.type-heading li>a {text-align: center;}
.builder-menu .nav>li>ul.type-heading li>a.opt-h2 {font-size: 22px;}
.builder-menu .nav>li>ul.type-text li>a {}
.builder-menu .nav>li>ul.type-text li>a.opt-text_h2 {font-size: 22px;}
.builder-menu .nav>li>ul.type-text li>a>span {display: block; margin-top: 10px; font-size: 12px; font-weight: 300; color:#727272;}
.builder-menu .nav>li>ul.type-text li>a>span:first-child {margin-top: 0;}



.builder-menu .nav>li>ul>li>a {position:relative; display:block; padding:10px 20px 10px 0; font-size: 16px; color:#111; border-bottom:1px solid #dadce0;}
.builder-menu .nav>li>ul>li>a.on,
.builder-menu .nav>li>ul>li>a.on:focus {color:#000;}
/* .builder-menu .nav>li>ul>li>a::before {visibility:hidden; display:inline-block; content:""; position:absolute; bottom:-1px; left:0; width:100%; height:1px; line-height:0; font-size:0; background: #f7f7f7;; width:0; -webkit-transition:all 0.3s; transition:all 0.3s;}
.builder-menu .nav>li>ul>li>a.on::before, .builder-menu .nav>li>ul>li>a.on:focus::before {visibility:visible; width:100%;} */

.builder-menu .nav>li>ul>li.toggle>a.on,
.builder-menu .nav>li>ul>li.toggle>a.on:focus {color:#0e0e19; font-weight:normal;}
.builder-menu .nav>li>ul>li.toggle>a::before {display:block; content:""; position:absolute; left:0; right:0; top:auto; bottom:-1px; width:100%; height:1px; background:#ebebeb;}
.builder-menu .nav>li>ul>li.toggle>a::after {display:inline-block; content:""; position:absolute; top:50%; right:18px; width:16px; height:16px; margin:-8px 0 0 -8px; /*background:url() 50% 50% no-repeat;*/ background-size:26px auto; transition:all 0.2s ease-in-out; opacity:.6;}
.builder-menu .nav>li>ul>li.toggle>a.on::before {background:#bcbccc;}
.builder-menu .nav>li>ul>li.toggle>a.on::after {-webkit-transform:rotate(180deg); transform:rotate(180deg); opacity:1;}

.builder-menu .nav>li>ul>li>ul {display:none; padding:15px 0 15px 0;}
/* .builder-menu .nav>li>ul>li>a.on + ul {display:block;} */

.builder-menu .nav>li>ul>li>ul li>a {position:relative; display:block; padding:10px 10px; font-size:14px;}
.builder-menu .nav>li>ul>li>ul li>a::before {display:inline-block; content:""; position:absolute; left:0; top:19px; width:2px; height:2px; background:#0e0e19; opacity:.4;}
.builder-menu .nav>li>ul>li>ul li>a.on, .builder-menu .nav>li>ul>li>ul li>a:focus {color:#1f7af7;}
.builder-menu .nav>li>ul>li>ul li>a.on::before, .builder-menu .nav>li>ul>li>ul li>a:focus::before {background:#1f7af7;}

.builder-menu .nav>li>ul>li>ul ul {padding:5px 0 5px 10px;}


.builder-text {display:none;}
.builder-text.active {display:block; animation:builder-nav-container-ani 0.3s ease;}
.text-block-container > .tit {padding-bottom: 10px; font-size: 16px; letter-spacing:0; font-weight: 500; color: #0d0c22; text-transform: capitalize;}

.text-block-container > .text-block-content + .tit  {padding-top: 26px;}



.builder-media {display:none;}
.builder-media.active {display:block; animation:builder-nav-container-ani 0.3s ease;}
@keyframes builder-nav-container-ani {
    from {opacity: 0;}
    to {opacity: 1;}
}
.media-upload-container {}
.builder-edit-media-label .builder-edit-media-input {width: 0; height: 0; opacity: 0; overflow: hidden; position: absolute; z-index: -1;}

.tab-list-wrap { position: relative; z-index: 10; padding: 10px 0 50px;}
.tab-list { display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }
.tab { margin-right: 5px; margin-left: 5px; padding: 15px 32px; border-style: solid; border-width: 1px; border-color: #f4f4f4; border-radius: 50px; background-color: #fff; transition: color 300ms cubic-bezier(.25, .46, .45, .94), border-color 300ms cubic-bezier(.25, .46, .45, .94), background-color 300ms cubic-bezier(.25, .46, .45, .94), transform 300ms cubic-bezier(.25, .46, .45, .94); color: #1f1b1a; font-size: 16px; line-height: 1.2em; font-weight: 500; text-align: center; letter-spacing: 0.06em; text-transform: uppercase; }
.tab:hover { background-color: #fb8c23; border-color: #fb8c23; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); color: #fff; }
.tab.is-checked { background-color: #fb8c23; border-color: #fb8c23; color: #fff; font-weight: bold; }
.tab.is-checked:hover { background-color: #ff3000; border-color: #ff3000; }



/* file */
/* .custom-file-img-wrap {position: relative; display: flex; flex-wrap: wrap;}
.custom-file-img-wrap::before {display: inline-block; content: ""; width: 170px; height: 140px; margin: 5px;}

.custom-file-img {position: absolute; left: 0; top:0; width: 170px; height: 140px; margin: 5px; overflow: hidden;}

.custom-file-img .custom-file-label {height: 140px;;}
.custom-file-img .custom-file-label::after {overflow: hidden; border-radius: 5px; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 51px; content: ""; background: url(../img/example-image-50.jpg) no-repeat center / contain;}
.custom-file-img .custom-file-label::before {position: absolute; z-index: 4; overflow: hidden; display: flex; justify-content: center; width: 26px; height: 26px; line-height: 22px; border-radius: 50%; top: 93px; left: 110px; transform: translate(-50%, -50%);  background-color: #f0f1f3; color: #122f76; content: "\2b"; font-size: 26px; font-family: "Font Awesome 5 Free";}

.img-insert {overflow: hidden; position: relative; display: inline-block; width: 170px; height: 140px;  margin: 5px; border: 1px solid #e4e5ed; display: flex; justify-content: center; align-items: center;}
.img-insert ~ .img-insert {}
.img-insert img {max-width: 100%;}
.img-insert .img-insert-btn-delete {position: absolute; bottom: 5px; right: 5px;}

.img-show-wrap {position: relative; display: flex; flex-wrap: wrap;}
.img-show {overflow: hidden; position: relative; display: inline-block; width: 170px; height: 140px;  margin: 5px; border: 1px solid #e4e5ed; display: flex; justify-content: center; align-items: center;}
.img-show ~ .img-show {}
.img-show img {max-width: 100%;}
.img-show .img-show-btn-delete {position: absolute; bottom: 5px; right: 5px;} */

.builder-edit-video {
    display: flex;
    /* line-height: 1; */
}
.builder-edit-video video {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -o-object-fit: cover;
    object-fit: cover
}
.video-progress-container {
    position: relative;
    width: 100%;
    height: 100%
}
.builder-edit-video:hover .mute-toggle {opacity: 1}
.mute-toggle {
    display: flex;
    position: absolute;
    z-index: 2;
    bottom: 24px;
    left: 20px;
    transition: opacity .2s ease;
    opacity: 0;
}
.mute-toggle.visible {
    opacity: 1
}
.mute-toggle .mute-button .svg-mute {display: block;}
.mute-toggle .mute-button .svg-mute-off {display: none;}
.mute-toggle .mute-button.active .svg-mute {display: none;}
.mute-toggle .mute-button.active .svg-mute-off {display: block;}

.mute-toggle .mute-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px 2px rgba(13,12,34,.05);
    color: #3d3d4e;
    cursor: pointer
}


.progress-bar-container {
    display: flex;
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: 100%;
    height: 40px;
    overflow: hidden;
    cursor: pointer
}

.progress-bar {
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 100%;
    height: 5px;
    transition: transform .2s linear;
    border-radius: 0 0 0 6px;
    background: #feba57
}

.upload-progress-bar {
    display: none;
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    height: 100%;
    border-radius: 4px;
    background: rgba(234,76,137,.6);
}


.media-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #dbdbde;
    border-radius: 8px;
    cursor: pointer
}

.media-upload.placeholder {
    padding: 30px 20px;
    background-color: #f8f8f8
}

.media-upload.media-upload-content {
    flex-direction: row;
    padding: 16px 20px;
    background-color: #fff
}

@media (min-width: 500px) {
    .media-upload.media-upload-content {
        flex-direction:column
    }
}

.placeholder-button {
    width: 100%;
    margin-bottom: 8px;
    background-color: #fff
}

.placeholder-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #6e6d7a;
    text-align: center
}

.media-upload-img {
    width: 100%;
    height: 40px;
    margin-right: 10px;
    overflow: hidden;
    background:#f3f3f4;
}

.media-upload-img img,.media-upload-img video {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background-color: #f8f8f8;
    -o-object-fit: cover;
    object-fit: cover
}

@media (min-width: 500px) {
    .media-upload-img img,.media-upload-img video {
        border-radius:0
    }

    .media-upload-img img:before,.media-upload-img video:before {
        content: "";
        display: block;
        padding-top: 75%
    }

    .media-upload-img img>,.media-upload-img video> {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
    }
}

@media (min-width: 500px) {
    .media-upload-img {
        height:auto;
        max-height: 200px;
        aspect-ratio: 16/9;
        margin-right: 0;
        margin-bottom: 16px
    }
}

.action-button-container {
    display: flex;
    width: 100%
}

.action-button-container .k-btn {
    width: 100%
}
.action-button-container .k-btn + .k-btn {margin-left: 8px;}
/* .action-button.remove {
    display: none 
} */
.media-upload-label .media-upload-input {width: 0; height: 0; opacity: 0; overflow: hidden; position: absolute; z-index: -1;}


/* editor */
font {font-size: 18px;}
.buttons-group {position: relative; display: flex;}
.buttons-group + .buttons-group {margin-top: 20px;}
.buttons-group .group-button ~ .group-button {margin-left: -1px;}
/* .buttons-group .group-button:first-child label {border-radius: 6px 0 0 6px;}
.buttons-group .group-button:last-child label {border-radius: 0 6px 6px 0;} */

.buttons-group .group-button:first-child {border-radius: 6px 0 0 6px;}
.buttons-group .group-button:last-child {border-radius: 0 6px 6px 0;}
.buttons-group .group-button {flex: 1; position: relative; display: inline-block; padding: 11px 19px; background: #fff; text-align: center; color:#2B2A29; font-size: 16px; line-height: 1.3; cursor: pointer; border: 1px solid #D3D3D3; line-height: 20px; cursor: pointer;}
.buttons-group .group-button.selected {z-index: 1; border-color: #5329d2; color: #5329d2; font-weight: 500;}

/* .buttons-group .group-button input[type="radio"] {display: inline-block; vertical-align: middle; opacity: 0;}
.buttons-group .group-button input[type="radio"] {width: 24px; height: 24px; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.buttons-group .group-button label {display: flex; position: relative; padding: 11px 19px; border: 1px solid #D3D3D3; line-height: 20px; cursor: pointer;}
.buttons-group .group-button input[type="radio"]:checked + label {z-index: 1; border-color: #50B587; color: #50B587; font-weight: 600;} */










/* .k-text-field-row {display: flex; flex-wrap: wrap; align-items:normal; margin-bottom: 35px;}
.k-text-field-row > .k-text-field-label {display: flex; align-items: center; width: 150px; padding-right: 10px;}
.k-text-field-row > .k-text-field-label.vertical-top {align-items:flex-start; padding-top: 16px;}
.k-text-field-row > .k-text-field-label.vertical-top ~ textarea.k-form-input {padding-top: 16px;} */
/* .k-text-field-row > .k-text-field-label + .k-form-input {width: 65%;} */
/* .k-text-field-label .w-icon-asterisk {line-height: 1.4;}
.k-text-field-label .w-icon-asterisk:before {margin: -9px 0 0 5px; width: 14px; height: 18px;}
.k-text-field-row > .k-form-input {margin-bottom: 0; flex:1; padding: 30px 30px 30px 10px;}
.k-text-field-row > textarea.k-form-input {min-height: 150px;}
.k-text-field-row > .k-form-text {margin-bottom: 0; flex:1; padding: 10px 30px 10px 0;}
.k-text-field-row label.error {width: 100%; margin-left: 150px; margin-top: 0; margin-bottom: -35px;} */

/* .k-text-field-multi-chk {display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 45px; margin-top: 5px;}
.k-text-field-multi-chk .k-checkbox,
.k-text-field-multi-chk .k-radio {margin-top:15px; margin-right: 15px; cursor: pointer;} */

/* label.error {display: flex; align-items: center; min-height: 35px; padding: 7px 0 7px 10px; margin-top: -35px; font-size: 15px; line-height: 1.3; color: #7928a7;}
.k-mn-contact-form .k-input + label.error {}
label.chk-error {}
.k-form-submit-wrap label.error {margin-top: 10px;}
label.chk-error-box {position: relative; display: inline-block;}
label.chk-error-box {animation:chk-error-box-ani .2s linear; position: absolute; z-index: 2; top: 120%; left: 0; right: -10px; width: auto; color: #4c4c4c; text-align: left; font-size: 0.923rem; line-height: 1.4; border-radius: 6px; padding: 10px 22px 10px 10px; border: 1px solid #595959; background-color: #fff; -webkit-box-shadow:3px 3px 5px 0 rgba(0, 0, 0, 0.07); box-shadow:3px 3px 5px 0 rgba(0, 0, 0, 0.07); font-size: 14px; line-height: 1.3; color: #333}
@keyframes chk-error-box-ani {
	from {transform:translateY(-30%); opacity: 0;}
	to {transform:translateY(0%); opacity: 1;}
}

.k-form-submit-wrap {display: flex; align-items: center;}
.k-form-submit-wrap > p {position: relative;}
.k-form-submit-wrap .k-form-submit {display: flex; align-items: center; margin-left: auto; width: 40%; font-size: 22px; text-align: right;}
.k-form-submit-wrap .k-form-submit .k-btn {}
.k-form-submit-wrap .w-icon-recaptcha:before {margin-right: 10px; filter: grayscale(100%);} */
@media screen and (max-width: 767px) {
    /* .k-form-submit-wrap {flex-wrap: wrap;}
    .k-form-submit-wrap .k-form-submit {margin-top: 20px; width: 100%;}
    .k-text-field-label {font-size: 20px;}
    .k-text-field-row > .k-text-field-label {width: 32%;}
    .k-text-field-row label.error {margin-left: 32%;}
    .k-text-field-multi-chk .k-checkbox,
    .k-text-field-multi-chk .k-radio {margin-top:10px; margin-right: 10px;}
    .k-text-field-multi-chk {margin-bottom: 25px;} */
}





/* .k-mn-video-cont-wrap {position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom:0; display: flex; align-items: flex-end;}
.k-mn-video-cont-wrap.fix-middle {align-items: center;}
.k-mn-video-cont-wrap.fix-center {justify-content: center;}
.k-mn-video-cont-wrap.fix-center .k-mn-video-cont {text-align: center;}
.k-mn-video-cont {color: #fff; width:1200px; padding: 0 0 0; margin: 80px auto 0;}
.k-mn-video-cont h1 {margin: 0 -40px; overflow: hidden; font-size: calc(2.5 * 1rem); line-height: calc(1.4 * (1 + (1 - 4)/25)); font-weight: normal;}
.k-mn-video-cont h1.letter-short {line-height: calc(1.2 * (1 + (1 - 4)/25));}
.k-mn-video-cont .txt {margin-top: 30px;}
.k-mn-video-cont .txt-link {margin-top: 30px;}
.k-mn-video-cont .txt-link .fa {font-size: 16px; margin-left: 3px;}
.k-mn-video-cont .t-btn-primary {padding: 13px 42px; border-color: #fff; border-width: 2px; background-color: rgba(0, 0, 0, 0.1); color: #fff;}
.k-mn-video-cont .t-btn-primary:hover {border-color: transparent; background-color: rgba(255, 255, 255, 1); color: #000;} */



/* 정책자금 채무자실태조사서 미리보기 */
.project-preview {position: relative; display: -ms-grid; display: grid; grid-column-gap:4%; /*-ms-grid-columns: 620px 260px;*/ grid-template-columns: 30% 66%; grid-row-gap: 20px; margin: auto;}
.project-preview::-webkit-scrollbar{-webkit-appearance:none; width: 8px; height: 8px;}
.project-preview::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(232, 232, 232, 0.5);-webkit-box-shadow: 0 0 1px rgba(232, 232, 232, 0.5)}
.project-preview::before {display: block; content: ''; position: absolute; top: 0; left: 640px; bottom: 0; width: 1px; height: 100%; background-color: #F5F5F5;}

.project-preview img {vertical-align: top;}
.project-preview-image {}
.project-preview-image > .item-image {position: relative; display: flex; justify-content: center; width: 320px; height: 452px; outline: 1px solid #E9E9E9; outline-offset: -1px;}
.project-preview-image > .item-image::before {content:""; display:block; position: absolute; top:9px; bottom:9px; left:9px; right:9px; border: 1px dashed #E9E9E9; background: url(../../images/common/ico/icon_images.svg) no-repeat center center / 36px 36px;}
.project-preview-image > .item-image .img {position: relative;}

.project-preview-cont {}
.project-info-row {display: flex; align-items:normal;}
.project-info-row > .project-info-tit {width: 130px; padding: 6px 10px 6px 0; color: #2B2A29; font-size: 18px; font-weight: 600;}
.project-info-row > .project-info-detail {flex: 1; padding: 5px 0 5px 0}
.project-info-row ~ .project-info-row { margin-top: 10px; }

.badge-project {display: inline-block; height: 26px; padding: 4px 16px; border-radius: 13px; background-color: #FAFAFA; color: #505050; font-size: 14px; font-weight: normal; white-space: nowrap;}
.badge-project.badge-project-green {background-color: #EBFAEB; color: #09A05B;}
.badge-project.badge-project-blue {background-color: #EFF8FF; color: #1369EE;}
.badge-project.badge-project-gray {background-color: #FAFAFA; color: #505050;}
.badge-project.badge-project-orange {background-color: #FFF4EA; color: #FA5C03;}
.badge-project.badge-project-red {background-color: #FFF3F3; color: #FF6868;}

.project-preview-photo {}
.project-preview-photo > .item-photo {position: relative; display: flex; align-items: center; justify-content: center; /*width: 260px;*/ width: 100%; height: 202px; border: 1px solid #E9E9E9;}
.project-preview-photo > .item-photo::before {content:""; display:block; position: absolute; top:9px; bottom:9px; left:9px; right:9px; border: 1px dashed #E9E9E9; background: url(../../images/common/ico/icon_images.svg) no-repeat center center / 36px 36px;}
.project-preview-photo > .item-photo .img {display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; /*width: 260px;*/ width: 100%; height: 182px; padding: 10px;}
.project-preview-photo > .item-photo ~ .item-photo {margin-top: 20px;}


.suggestion-list {
    border-top: 1px solid #e8e8e8;
    overflow: hidden;
    width: 100%;
    max-height: 310px;
    margin-top: 20px;
    overflow-x:hidden;
    overflow-y:auto;
}
.suggestion-list-block {width: 211px; padding: 0 11px 11px;}
.suggestion-list-container {
    display: flex; flex-wrap: wrap;
}
.suggestion-item {
    position: relative;
    border-radius: 4px;
    cursor: pointer;
    height: 89px;
    margin: 10px 0 0 10px;
    overflow: hidden;
    width: 89px;
}
.suggestion-item.active:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    border: 4px solid #ea4c4c;
    border-radius: 4px;
}
.suggestion-item:nth-child(2n-1) {margin: 10px 0 0 0;}
.suggestion-item-img {
    border-radius: 2px;
    height: 89px;
    overflow: hidden;
    text-align: center;
    width: 89px;
}
.suggestion-item .spinner-loader {position: absolute;
    left: 50%;
    top: 50%; margin: -10px 0 0 -10px;}



    .placeholder-container{
        position: relative;
        padding: 40px 15px 66px 15px;
        max-width: 990px;
        margin: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .placeholder-container .media-upload-input {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        outline: none;
        opacity: 0;
        cursor: pointer;
    }
    .placeholder-container h1{
        /* font-family: montserrat, sans-serif; */
        color: #293745;
        font-size: 48px;
        font-weight: 800;
        text-align: center;
        margin-bottom: 26px;
    }
    .placeholder-container h1 .hl {
        background: -webkit-gradient(linear, left top, right top, color-stop(9.38%, #1a2a6c), color-stop(47.4%, #0c81ee), color-stop(86.46%, #f9185b));
        background: linear-gradient(90deg, #1a2a6c 9.38%, #7e3eff 47.4%, #d944eb 86.46%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .placeholder-container .description{
        font-weight: 400;
        font-size: 16px;
        line-height: 160%;
        text-align: center;
        color: #4e5f72;
        margin-bottom: 24px;
    }
    .plan-segment-container.interval-selector {
        min-width: 320px;
    }

    .placeholder-container .plan-segment-container {
        margin-left: auto;
        margin-right: auto;
        background: #fff;
        border-radius: 100px;
        padding:20px 6px 16px;
        width: 100%;
        min-width: 320px;
        max-width: 480px;
        display: -webkit-box;
        display: -ms-flexbox;
        border: 3px solid #997ceb;
        display: flex;
        position: relative;
        -webkit-box-sizing: border-box;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
    }
    .placeholder-container .plan-segment-container .img {text-align: center;}
    .placeholder-container .plan-segment-container .txt {text-align: center; margin-top: 10px; color: #694be7;}
    .placeholder-container .media-upload-label .media-upload-input {width: 0; height: 0; opacity: 0; overflow: hidden; position: absolute; z-index: -1;}

    .od-collection__info {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        margin-top: 10px;
    }
    .od-collection__info-item {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        padding: 0 0 0 32px;
        margin: 8px 0;
    }
    @media (min-width: 888px) {
        .od-collection__info-item {
            width: 40%;
            padding: 0 32px;
            margin: 24px 0;
        }
    }
.swui-h4 {
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    color: #092540;
    font-size: 1rem;
    line-height: 1.5;
}
.od-collection__info-item::before {
    position: absolute;
    top: 3px;
    left: 0;
    display: flex;
    width: 20px;
    height: 20px;
    content: "";
    border-radius: 20px;
    box-shadow: 4px 5px 16px rgba(64, 68, 77, .12);
}
.od-collection__info-item:nth-child(1)::before {
    background-color: #faba7c;
}
.od-collection__info-item:nth-child(2)::before {
    background-color: #20dfd7;
}
.od-collection__info-item:nth-child(3)::before {
    background-color: #30a6e9;
}
.od-collection__info-item:nth-child(4)::before {
    background-color: #ea89eb;
}

.mypage-profile {padding:0 20px 0 20px;}
.mypage-profile .infor-top {display:-webkit-box; display:-ms-flexbox; display:flex; align-items:center; justify-content:space-between;}
.mypage-profile .infor {position:relative; margin-top:80px; padding:0 0 20px 0;}
.mypage-profile .infor .infor-txt  {position:relative; display:flex; align-items:center; min-height: 85px; padding:16px 0 16px 92px; margin-left: -42px;}
.mypage-profile .infor .avatar {z-index:1; position:absolute; left:0; top:50%; transform:translateY(-50%); width: 80px;
    height: 80px; border-radius: 50%;  border: 3px solid #fff; background: url(../../images/common/avatar_puppy.svg) no-repeat center / contain; background-color: #e2d8ff; box-shadow:0 .2px .4px 0 rgba(0,0,0,.1); box-shadow:2px 5px 7px 0px rgba(0, 0, 0, .1)}
.mypage-profile .infor .infor-box {position:relative; overflow:hidden; min-height: 100px; border-radius:16px; display: flex; align-items: center; justify-content: center;}
.mypage-profile .infor .infor-box:before {content:''; position:absolute; top:0; bottom:-50%; left:-1%; right:-1%;
    background: radial-gradient(ellipse at center 98%, rgb(251 218 244) 15%, rgb(237 183 235) 35%, rgb(152 77 184) 100%);
}

.mypage-profile .infor .infor-txt .tit  {color:#000000;text-shadow: 2px 2px 0 #fff; font-size:1.6rem; line-height:2.4rem; font-weight: 600; font-family: Poppins; text-transform: capitalize;
    /* animation:2s blinking-name step-end infinite; */
    animation: blinking-name 3s steps(1) infinite;
}
@keyframes blinking-name {
/* from {
} */
33% {
    color:#fff;
    text-shadow: 2px 2px 0 #ea4c4c;
}
66% {
    /* color:#8a3ec9;
    text-shadow: 2px 2px 2px #fff; */

    color: #4f0db8;
    text-shadow: #f5d4d4 2px 2px 0px, #e291d0 4px 4px 0px;
}
/* to {
} */
}

.mypage-profile .infor .infor-txt .text-num  {display:flex; align-items:center; margin-left:.7rem;  margin-top:-.2rem; color:var(--white); font-size:1.4rem; line-height:2.2rem;}
.mypage-profile .infor .infor-txt .text-num .number {font-size:2rem; font-weight:900; line-height:2.8rem}
.mypage-profile .infor .infor-txt .text-num .text-score {margin:.4rem 0 0 .4rem;}
.mypage-profile .infor .infor-txt.has-arrow:after {content:''; width:1.6rem; height:1.6rem; margin-left:.7rem; background:url(/resource/img/mwp/cbc/symbol/ico_basic_arrow_right_white.svg) no-repeat right center/1.6rem 1.6rem;}
/* 모락 나의 등급 상세 */
/* .mypage-profile.type01 {padding:100px 0;}
.mypage-profile.type01 .infor {margin-top:.5rem;}
.mypage-profile.type01 .infor .infor-txt .text-num .number {font-size:2.6rem; font-weight:900; line-height:3.2rem}
.mypage-profile.type01 .infor .infor-txt .text-num .text-score {margin:.2rem 0 0 .4rem;} */