@charset "utf-8";

/* 마이페이지 - 공통 */
#myPage .inner{max-width:var(--main-size);margin:0 auto}
#myPage .empty{padding:30px 0;border:none;font-weight:400;text-align:center;color:#aaa}
.cm-mp-cont{width:calc(100% - 220px);min-height:70vh;padding:45px 0 100px 50px}
.cm-mp-tit{margin-bottom:40px}
.cm-mp-tit h1{margin-bottom:5px;font-size:24px;font-weight:700;color:#111}

/* 마이페이지 - 공통 - snb */
#mpSnb{flex-shrink:0;width:220px;padding:50px 25px; background:#f5f5f5}
#mpSnb > p{padding-bottom:15px;font-size:18px;font-weight:700;color:#111}
#mpSnb > ul{gap:12px}
#mpSnb > ul > li{position:relative}
#mpSnb > ul > li > a{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:500;color:#111}
#mpSnb > ul > li > a svg{width:15px;height:15px}
#mpSnb > ul > li:not(.dropdown).on > a{color:var(--primary)}
#mpSnb .dropdown > a:after{content:"\f107";margin-left:auto;font-size:18px;font-weight:normal;color:#111;font-family:'fontawesome'}
#mpSnb .dropdown.on > a:after{transform:scaleY(-1)}
#mpSnb .snb-toggle{display:none;width:max-content;width:100%;padding:8px 0 0 20px}
#mpSnb .snb-toggle li+li{margin-top:2px}
#mpSnb .snb-toggle li a{display:block;font-size:13px;color:#777}
#mpSnb .snb-toggle li.on a{font-weight:500;color:var(--primary)}
@media(hover:hover){#mpSnb .snb-toggle li a:not(.on):hover{font-weight:500;color:#111}}
#myPage #shBreadcrumb{padding:0}

/* 마이페이지 - 다운로드 */
#mpDownloads .product-list{gap:15px;margin:15px 0}
#mpDownloads .product-item{border:1px solid #e5e5e5;border-radius:12px}
#mpDownloads .product-item-option{gap:25px;position:relative;width:80%;padding:25px}
#mpDownloads .product-item-option .date{width:85px;font-size:13px;font-weight:500;white-space:nowrap}
#mpDownloads .product-item-option .thum{overflow:hidden;width:200px;height:150px;border-radius:12px;border:1px solid #e5e5e5}
#mpDownloads .product-item-option .thum img{width:100%}
#mpDownloads .product-item-option .info span{padding:7px 15px;border-radius:20px;font-size:13px;font-weight:500;color:#777;background:#f2f2f2}
#mpDownloads .product-item-option .info p{margin:10px 0;font-size:16px;font-weight:600}
#mpDownloads .product-item-option .info ul li{font-size:12px;color:#777}
#mpDownloads .product-item-option .info ul li:before{display:inline-block;vertical-align:middle;content:"";width:2px;height:2px;margin-right:6px;background:#aaa}
#mpDownloads .product-item-btns{gap:10px;width:20%;margin-left:auto;padding:0 25px;border-left:1px solid #e5e5e5}
#mpDownloads .product-item-btns .btn-refund{cursor:pointer;gap:4px;font-size:12px;color:#111}
#mpDownloads .product-item-btns .btn-refund svg{width:14px;height:14px}
#mpDownloads .product-item-btns .btn-refund:disabled{cursor:help!important;color:#aaa}
#mpDownloads .product-item-btns .btn-download:disabled{pointer-events:none;opacity:.25}
#mpDownloads .product-item-btns .mo-ps{display:none;font-size:11px;color:#aaa;text-align:center}
#mpDownloads .product-item-btns .caution{font-size:11px;text-align:center;color:var(--error);line-height:1.25}
@media(hover:hover){
#mpDownloads .cm-tooltip:hover::after,#mpDownloads .cm-tooltip:hover:before{opacity:1}
}

/* 마이페이지 - 좋아요 */
#mpLikes #itemList{padding:0}
#mpLikes #itemList .empty{width:100%!important}

/* 마이페이지 - 코멘트 */
#mpComments .btns{gap:8px;margin-bottom:20px}
#mpComments .btns a.on{color:#fff;background:var(--primary)}
#mpComments .product-comments .replied{gap:0}
#mpComments .product-comments .split{padding:20px 0 0;border:none;border-top:1px solid #e5e5e5;border-radius:0}
#mpComments .product-comments .split+.split{margin-top:20px;border-radius:0}
#mpComments .product-comments .split a{display:block}
#mpComments .product-comments .split .thum{overflow:hidden;width:120px;height:80px;border-radius:10px;border:1px solid #e5e5e5}
#mpComments .product-comments .split .thum img{width:100%}

/* 마이페이지 - 헬프센터 */
#mpHelpcenter .cm-mp-tit{text-align:center}
#mpHelpcenter .cm-search{margin:0 auto}
#mpHelpcenter .btns{flex-wrap:wrap;gap:8px;margin-top:40px}
#mpHelpcenter .btns a.on{color:#fff;background:var(--primary)}
#mpHelpcenter .faq-wrap{margin:20px 0 60px}
#mpHelpcenter .faq-cont{overflow:hidden;border-top:1px solid #e5e5e5}
#mpHelpcenter .cont-q{display:block;position:relative;width:100%;padding:0 40px 0 20px;text-align:left;color:#111}
#mpHelpcenter .cont-q:after{display:block;content:"\f107";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:18px;color:#111;font-family:'fontawesome'}
#mpHelpcenter .cont-q.open:after{content:"\f106";color:#aaa}
#mpHelpcenter .cont-q p{padding:15px 0;font-size:14px;font-weight:500;line-height:1.35}
#mpHelpcenter .cont-q p span{margin-right:20px}
#mpHelpcenter .cont-q p b{flex-shrink:0;margin-right:15px;font-size:13px;font-weight:500;color:#aaa}
#mpHelpcenter .cont-a{display:none;padding:15px 20px;font-size:14px;font-weight:400;color:#777;background:#f7f7f7}
#mpHelpcenter .cont-a a{color:var(--primary)}
#mpHelpcenter .links{gap:20px;margin-top:50px}
#mpHelpcenter .links a{gap:15px;flex:1;padding:15px 30px;border:1px solid #e1e1e1;border-radius:12px;font-size:13px;color:#777;background:#f2f2f2; transition:all .15s}
#mpHelpcenter .links a:hover{background:#fff}
#mpHelpcenter .links a h2{margin-bottom:4px;font-size:15px;font-weight:600;color:#111}
#mpHelpcenter .links a .icon{display:flex;flex-shrink:0;width:50px;height:50px;border-radius:50%;background:#fff}
#mpHelpcenter .links a svg{width:22px;height:22px;margin:auto;color:#111}

/* 마이페이지 - 셋팅 */
#mpSettings h2{font-size:16px;font-weight:700}
#mpSettings .cm-mp-tit{margin-bottom:20px;text-align:center}
#mpSettings .tabs{gap:8px;margin-bottom:40px}
#mpSettings .tabs button{opacity:.35;background:var(--primary);transition:all .15s}
#mpSettings .tabs button.on{opacity:1}
#mpSettings .tabs button:not(.on):hover{opacity:.5}
#mpSettings .cm-form{max-width:480px;margin:0 auto}

/* 마이페이지 - 셋팅 - 프로필 */
#mpSettings .profile-logo-label{display:block;position:relative;width:max-content;margin:0 auto 25px;cursor:pointer}
#mpSettings .profile-logo-circle{width:85px;height:85px;border:1px solid #d9d9d9;border-radius:50%;overflow:hidden;background:#fafafa}
#mpSettings .profile-logo-circle img{width:100%;height:100%;object-fit:contain}
#mpSettings .profile-logo-icon{display:flex;align-items:center;justify-content:center;position:absolute;right:2px;bottom:2px;width:24px;height:24px;border-radius:50%;border:1px solid #d9d9d9;color:var(--dark);background:#fff}
#mpSettings .profile-logo-icon svg{width:14px;height:14px;color:#aaa}
#mpSettings .profile-caution{float:right;font-size:12px;font-weight:500;color:var(--error)}
#mpSettings .profile-caution:after{content:"";clear:both}

/* 로딩 */
#loading{display:flex;flex-flow:column;justify-content:center;align-items:center;position:fixed;top:0;left:0;z-index:1001;width:100%;height:100%;background:rgba(0,0,0,.65)}
#loading .loader_wrap .loader{position:relative;margin:0px auto;width:65px;height:65px}
#loading .loader_wrap .loader:before{content:'';display:block;padding-top:100%}
#loading .circular-loader{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;height:100%;-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}
#loading .loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;-webkit-animation:dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;stroke-linecap:round}
@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}100%{stroke-dasharray:89,200;stroke-dashoffset:-124}}
@keyframes color{0%{stroke:var(--primary)}40%{stroke:var(--primary)}66%{stroke:var(--primary)}80%, 90%{stroke:var(--primary)}}
#loading p{margin:20px 0;font-size:16px;text-align:center;color:#fff;font-family:'Pretendard'}
@media(max-width:768px){
#loading{font-size:14px}	
}

@media(max-width:1480px){
.cm-mp-cont{width:calc(100% - 180px);padding-left:16px}    
#mpSnb{width:180px}
#myPage{padding:0 16px}
}
@media(max-width:1280px){
#mpDownloads .product-item-option{gap:16px;padding:16px}    
#mpDownloads .product-item-btns{padding:0 16px}
}
@media(max-width:1024px){
.cm-mp-cont{width:100%;padding:30px 16px}
#mpSnb{overflow-x:auto;width:100%;padding:12px 16px}
#mpSnb > p{display:none}
#mpSnb > ul{flex-direction:row;gap:20px}
#mpSnb > ul > li > a{gap:3px;font-size:13px;white-space:nowrap}
#mpSnb > ul > li:last-child{padding-right:30px}
#myPage{padding:0}    
#myPage .inner{flex-direction:column}    
}
@media(max-width:768px){
.cm-mp-tit{margin-bottom:30px}    
.cm-mp-tit h1{font-size:20px}    
#mpDownloads .product-item-option{flex-wrap:wrap;width:70%}   
#mpDownloads .product-item-option .date{width:100%;font-size:12px}    
#mpDownloads .product-item-option .thum{width:30%}
#mpDownloads .product-item-option .info{width:calc(70% - 16px)}
#mpDownloads .product-item-option .info span{font-size:12px}
#mpDownloads .product-item-option .info p{font-size:14px}
#mpDownloads .product-item-option .info ul li{font-size:11px}
#mpDownloads .product-item-btns{gap:6px;width:30%}
#mpDownloads .product-item-btns .btn-refund:not(.comp){display:none}
#mpDownloads .product-item-btns .btn-refund:hover{cursor: default!important}
#mpDownloads .product-item-btns .btn-refund.comp{justify-content:center;width:100%;padding:6px 0;border-radius:6px;border:1px solid #ddd;background:#f2f2f2}
#mpDownloads .product-item-btns .btn-refund svg{display:none}
#mpDownloads .cm-tooltip::before{display:none}
#mpDownloads .cm-tooltip::after{display:none}
#mpDownloads .product-item-btns .mo-ps{display:block}
#mpComments .product-comments .split{padding-top:12px}
#mpComments .product-comments .split+.split{margin-top:12px}
#mpHelpcenter .faq-wrap{margin-bottom:30px}
#mpHelpcenter .cont-q{padding:0 25px 0 12px}
#mpHelpcenter .cont-q:after{right:10px}
#mpHelpcenter .cont-q p{padding:12px 0;font-size:13px}
#mpHelpcenter .cont-q p span{margin-right:12px}
#mpHelpcenter .cont-q p b{max-width:80px;margin-right:12px;font-size:12px;word-break:break-all}
#mpHelpcenter .cont-a{padding:12px 16px}
#mpHelpcenter .links{gap:8px;margin-top:20px}
#mpHelpcenter .links a{gap:10px;padding:12px 16px;font-size:12px}
#mpHelpcenter .links a h2{font-size:14px}
#mpHelpcenter .links a .icon{width:40px;height:40px}
#mpHelpcenter .links a .icon svg{width:18px;height:18px}
#mpSettings .tabs{margin-bottom:20px}
}    
@media(max-width:480px){
#mpDownloads .product-item{flex-direction:column}    
#mpDownloads .product-item-option{flex-direction:column;width:100%}
#mpDownloads .product-item-option .thum{width:100%}
#mpDownloads .product-item-option .info{width:100%}
#mpDownloads .product-item-btns{width:100%;padding:16px;border-top:1px solid #e5e5e5}
#mpHelpcenter .links{flex-direction:column}

}