@charset "UTF-8";

/* 레이아웃 공통 */
body,html{position:relative; height:100%;}
body {height: auto;}
body{position:relative; background-color:#ffff; color:#383B40; font-size:14px; font-weight:400; font-family:"Pretendard" ,"Apple SD Gothic Neo","애플 SD 산돌고딕 Neo","Malgun Gothic","맑은 고딕","돋움",Dotum,Helvetica,Tahoma,Dotum,sans-serif; line-height:22px; line-height:24px; overflow-x:hidden;}
header{position:relative; z-index:30; width:100%; background-color:#fff;}
main{position:relative; z-index:10; width:100%; background-color:#fff;}
footer{position:relative; z-index:20; width:100%; background-color:#fff;}
@media all and (max-width:768px){
    body.side-open{overflow:hidden;}
}

/* header */
header{border-bottom:1px solid #e5e8ec;}
header .lnb{padding:10px 40px 10px 159px;}
header .lnb .logo{position:absolute; top:10px; left:40px;}
header .lnb .logo h1 img{height:68px;}
header .lnb .menu-open,
header .lnb .menu-close{display:none; font-size:0; line-height:0;}
header .lnb .menu{padding:16px 0; font-size:0; line-height:0;}
header .lnb .menu .menu-list{display:inline-block; vertical-align:top;}
header .lnb .menu .menu-list .menu-item{display:inline-block; vertical-align:top;}
header .lnb .menu .menu-list .menu-item > a{line-height:36px;}
header .lnb .menu .menu-list.n1 .menu-item + .menu-item{margin-left:36px;}
header .lnb .menu .menu-list.n1 .menu-item > a{color:#383b40; font-size:18px; font-weight:600;}
header .lnb .menu .menu-list.n1 .menu-item.active > a{color:#2ca449;}
header .lnb .menu .menu-list.n2{float:right;}
header .lnb .menu .menu-list.n2 .menu-item + .menu-item{margin-left:8px;}
header .lnb .menu .menu-list.n2 .menu-item > a{padding:0 17px; border-radius:4px; background-color:#383b40; color:#fff; font-size:13px; font-weight:600; transition:background-color .15s ease-in-out;}
header .lnb .menu .menu-list.n2 .menu-item > a:hover{background-color:#2b2e33;}
header .lnb .menu .menu-list.n2 .menu-item:first-child > a{background-color:#2ca449;}
header .lnb .menu .menu-list.n2 .menu-item:first-child > a:hover{background-color:#259740;}
header .lnb .menu .menu-list.n2 .menu-item.user{position:relative;}
header .lnb .menu .menu-list.n2 .menu-item.user .user-btn{position:relative; min-width:86px; height:36px; padding:0 17px; border-radius:4px; background-color:#f7f7f7; color:#383b40; font-size:13px; font-weight:600; transition:background-color .15s ease-in-out;}
header .lnb .menu .menu-list.n2 .menu-item.user .user-btn:hover{background-color:#f1f1f1;}
header .lnb .menu .menu-list.n2 .menu-item.user .user-btn span{position:relative; color:#383b40;}
header .lnb .menu .menu-list.n2 .menu-item.user .user-btn span:before{display:block; position:absolute; top:calc(50% + 7px); left:0; right:0; height:1px; background-color:#383b40;}
header .lnb .menu .menu-list.n2 .menu-item.user .user-menu{opacity:0; visibility:hidden; overflow:hidden; position:absolute; top:100%; right:0; padding:12px 17px; border-radius:4px; background-color:#fff; box-shadow:0 3px 8px 0 rgba(0, 0, 0, 0.16); transition:all .25s ease-in-out;/* width:96px;*/}
header .lnb .menu .menu-list.n2 .menu-item.user.active .user-menu{opacity:1; visibility:inherit; top:calc(100% + 8px);}
header .lnb .menu .menu-list.n2 .menu-item.user .user-menu li{}
header .lnb .menu .menu-list.n2 .menu-item.user .user-menu li + li{margin-top:4px;}
header .lnb .menu .menu-list.n2 .menu-item.user .user-menu li a{font-size:14px; line-height:22px;}
header .lnb .menu .menu-list.n2 .menu-item.user .user-menu li a:hover{text-decoration:underline;}
header .m-lnb{display:none;}
@media all and (max-width:768px){
    header{position:fixed; top:0; left:0; right:0;}
    header .lnb{height:56px; padding-right:20px; padding-left:80px;}
    header .lnb .logo{top:7px; left:20px;}
    header .lnb .logo h1 img{height:42px;}
    header .lnb .menu-open,
    header .lnb .menu-close{display:block;}
    header .lnb .menu-open{position:absolute; top:9px; right:8px; width:40px; height:40px; border-radius:4px 0 0 4px; background:#fff url(../images/sub/menu_open.png) no-repeat center / 15px auto; transition:all .25s ease-in-out;}
    .side-open header .lnb .menu-open{opacity:0; visibility:hidden;}
    header .lnb .menu-close{opacity:0; visibility:hidden; position:absolute; top:8px; right:8px; width:40px; height:40px; border-radius:4px 0 0 4px; background:#fff url(../images/sub/detail_close.png) no-repeat center / 15px auto; transition:all .25s ease-in-out;}
    .side-open header .lnb .menu-close{opacity:1; visibility:inherit;}
    header .lnb .menu{display:none; opacity:0; visibility:hidden; position:fixed; top:0; right:-320px; bottom:0; width:320px; padding:0; padding-top:80px; background-color:rgba(255,255,255,.97); box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.12); text-align:center; transition:all .25s ease-in-out;}
    header .lnb .menu.active{opacity:1; visibility:inherit; right:0;}
    header .lnb .menu .menu-list{display:block;}
    header .lnb .menu .menu-list .menu-item{display:block;}
    header .lnb .menu .menu-list.n1 .menu-item + .menu-item{margin:10px 0 0 0;}
    header .lnb .menu .menu-list.n2{float:none; margin-top:24px;}
    header .lnb .menu .menu-list.n2 .menu-item{display:inline-block;}
    header .m-lnb{display:block; position:fixed; left:0; right:0; bottom:0; border-top:1px solid #e5e8ec; background-color:#fff;}
    header .m-lnb .m-menu-list{padding:0 3%; font-size:0; text-align:center; line-height:0;}
    header .m-lnb .m-menu-item{display:inline-block; width:33.33%; vertical-align:top;}
    header .m-lnb .m-menu-item + .m-menu-item{}
    header .m-lnb .m-menu-item + .m-menu-item:before{display:block;}
    header .m-lnb .m-menu-item a{display:block; padding:30px 0 4px 0; background-repeat:no-repeat; background-position:center top 7px; background-size:23px auto; font-size:13px; font-weight:500; line-height:22px;}
    header .m-lnb .m-menu-item:nth-child(1) a{background-image:url(../images/common/m_menu_icon1.png);}
    header .m-lnb .m-menu-item:nth-child(2) a{background-image:url(../images/common/m_menu_icon2.png);}
    header .m-lnb .m-menu-item:nth-child(3) a{background-image:url(../images/common/m_menu_icon3.png);}
    header .m-lnb .m-menu-item a:after{display:inline-block; height:100%; vertical-align:middle;}
    header .m-lnb .m-menu-item a span{display:inline-block; vertical-align:middle;}
}

/* footer */
.footer{padding:48px 0; background-color:#383b40;}
footer{color:#fff; font-size:14px; text-align:center; line-height:26px; transform: translate(0%);}
footer .footer-link{color:#fff; font-weight:600;}
footer .footer-link:hover{text-decoration:underline;}
footer .footer-info{margin-top:8px;}
footer .footer-info li span{position:relative; vertical-align:top;}
footer .footer-info li span + span{margin-left:16px;}
footer .footer-info li span + span:before{display:block; position:absolute; top:0; left:-8px; bottom:0; width:1px; height:10px; margin:auto 0; background-color:rgba(255,255,255,.5);}
footer .footer-copyright{margin-top:8px; font-weight:200;}
@media all and (max-width:768px){
    footer{display:none;}
}

/* loading */
.loading-bg { position: absolute; z-index: 99; background-color: rgba(0,0,0,0.4); width: 100%; height: 100%; top: 0; left: 0; display: none; }
.loading-bg .loading-img { position: absolute; left: calc(50% - 50px); top: calc(50dvh - 50px); margin: auto; }
.loading-bg .loading-text { margin: auto; text-align: center; position: absolute; left: calc(50% - 80px); top: calc(56dvh); color: #fff; font-size: 1.25rem; }

/* Editor */
.ck-editor__editable:not(.ck-editor__nested-editable) { min-height: 200px; height: auto; }
.ck-placeholder { color: #a0a0a0; font-size: 14px; }
.ck-content, .ck-content p { font-size: 16px; line-height: 24px; }
.ck-content h1 { font-size: 2.5rem; }
.ck-content h2 { font-size: 2rem; }
.ck-content h3 { font-size: 1.75rem; }
.ck-content a { color: #1a0dab; text-decoration: underline; }
.ck-content a { color: #383b40; }
.ck-content i { font-style: italic; }
.ck-content em, .ck-content span, .ck-content a { display: inline; } 
.ck.ck-editor__editable_inline { border: none; }
.ck.ck-dropdown.line-height-dropdown { position: absolute; }
.ck.ck-dropdown.line-height-dropdown li { padding: 5px 10px; background-color: #fff; border: 1px solid #e5e8ec; }
.ck.ck-editor__main>.ck-editor__editable[contenteditable="false"]:not(.ck-focused) { border-color: transparent !important; }
.ck.ck-editor__editable_inline[contenteditable="false"] { background-color: transparent; }
.ck.ck-editor__editable_inline[contenteditable="false"] .ck-widget:hover { background-color: inherit; }
.ck.ck-editor__editable_inline[contenteditable="false"] .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle { display: none; }
.ck.ck-editor__editable_inline[contenteditable="false"] .ck-widget.ck-widget_selected, .ck.ck-editor__editable_inline[contenteditable="false"] .ck-widget.ck-widget_selected:hover { outline-color: transparent !important; }
@media (max-width: 767px) {
    /* 툴바 항상 표시 */
    .ck-toolbar {
        position: sticky;
        top: 0; /* 화면 상단에 붙게 설정 */
        z-index: 10; /* 다른 요소 위에 오도록 설정 */
    }
}