@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");/* regular-400, medium-500, semibold-600, bold-700 */ 

*{-webkit-text-size-adjust:none}
body{background:#fff;font-size:0.81em;font-family:'Pretendard'}
h1, h2, h3, h4, h5, h6, input, button, textarea, select{font-family:'Pretendard'}
:root{
    --primary:#246BEB;
    --primary-50:rgba(36, 107, 235, .5);
    --primary-10:rgba(36, 107, 235, .1);
    --primary-hover:#0f54cf;
    --primary-sky:#0abddd;
    --secondary:#21252A;
    --third:#ff7814;
    --third-50:rgb(255, 120, 20, .5);
    --third-gray:#fff6ef;
    --danger:#EB003B;
    --danger-gray:#fff1f6;    
    --surface-gray:#EEF2F7;
    --surface-gray-bd:#D0D4D9;
    --surface-sky:#f1f6f7;
    --surface-sky-bd:#e7fbff;
    --color-dark:#464C53;
    --color-dark-50:rgb(70, 76, 83, .5);    
    --color-gray:#8C9299;
    --main-size:1200px;
} 

/* 디폴트 */
.cm-btn{border:none;border-radius:4px;background:none}
/* 공통 */
body.no-scroll{overflow:hidden;height:100%;}
.cm-inner{max-width:var(--main-size);margin:0 auto}
.cm-flex{display:flex;align-items:center}
.cm-flex-jc-ct{justify-content:center}
.cm-flex-col{display:flex;flex-direction:column;align-items:center}
.cm-flex-wrap{flex-wrap:wrap}
.cm-flex.gap-8{gap:8px}
.cm-flex.just-end{justify-content:flex-end}
.cm-mgl-auto{margin-left:auto}
.cm-ta-right{text-align:right}


/* 전체 wrapper */
#shWrapper{position:relative;min-width:1200px;margin:0 auto;font-size:14px;line-height:1.4;color:var(--color-gray)}
#shWrapper *{word-break:keep-all}

/* 사용성 */
#shUtility{height:36px;font-weight:400;color:var(--color-dark);background:var(--surface-gray)}
#shUtility .cm-flex{height:100%}
#shUtility p img{width:13px;margin-right:6px}
#shUtility .zoom-control{gap:4px;margin-left:auto;font-size:15px}
#shUtility .zoom-control button{display:flex;width:21px;height:21px;border-radius:3px;border:1px solid var(--surface-gray-bd);text-align:center;background:#fff}
#shUtility .zoom-control button span{margin:auto;font-size:16px;color:var(--color-dark)}
#shUtility .zoom-control button.reset span{transform:scaleX(-1)}

/* header */
#shHeader{position:sticky;top:0;z-index:12;background:#fff} 

/* container */
#shContainer{position:relative;z-index:11}

/* main */
#mainSection{overflow:hidden}
#mainSection section:not(#shMain){margin-top:65px}
#mainSection h2{margin-bottom:15px;font-size:26px;font-weight:700;color:var(--secondary)}

/* sub-cont */
#shCont{position:relative;max-width:var(--main-size);min-height:70vh}

/* back to top */
#backToTop{opacity:0;visibility:hidden;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;position:fixed;right:20px;bottom:50px;z-index:11;width:55px;height:55px;padding-top:6px;border-radius:8px;border:1px solid #ddd;font-size:13px;font-weight:600;color:var(--color-gray);box-shadow:4px 4px 6px rgba(0,0,0,.06);background:#fff}
#backToTop svg{width:20px;height:20px}
#backToTop.show{opacity:1;visibility:visible}

/* footer */
#shFooter{position:relative;z-index:10;padding:60px 0;border-top:1px solid #ddd;font-weight:300;color:var(--color-gray)} 
#shFooter .ft-logo{width:120px}
#shFooter .ft-add{margin-top:20px}

@media(hover:hover){
#backToTop:hover{transform:translate(-2px,-2px);color:var(--color-dark);box-shadow:4px 4px 4px rgba(0,0,0,.1)}    
}
@media(max-width:1240px){
#shUtility{padding:0 15px}    
}
@media(max-width:768px){
#shWrapper{font-size:13px}    
#shUtility{height:32px}  
#shUtility .zoom-control{display:none}    
#shHeader{position:relative}
}
@media(max-width:380px){
#shUtility{font-size:12px;letter-spacing:-.5px}    
#shUtility p img{width:10px;margin-right:3px}
}
