@charset "utf-8";

@import url(//cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css);
/* UI - Setup
------------------------------------------------*/
html, body {height:100%;  -webkit-text-size-adjust:none; background-color:var(--bg-main-color); color:var(--default-color); font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; font-weight:500;}
body > * :disabled {cursor:not-allowed !important; filter: grayscale(1);}
a {color:var(--anchor-color); text-decoration:none; font-size:13px;}
a:hover {color:var(--prime-color); text-decoration:none;}
a:focus,
input:focus,
button:focus {}
h1, h2, h3, h4, h5 {margin:0; font-weight:normal; word-break: break-word;}
hr {margin:0px; border:0px;}

/* ------------------------------------------------------------------
UI - COMMON
------------------------------------------------------------------ */
:root {
	/* common */
	--default-color:#333;
    --anchor-color:#333;
	/* prime */
	--prime-color:#6f48ff;
	/* bg */
	--bg-main-color:#fff;
	--bg-sub-color:#f5f5f5;
	--bg-third-color:#f9f9f9;
	/* border */
	--border-main-color:#ddd;
	--border-sub-color:#eee;
	/* --border-third-color:#fff; */
	/* txt */
	--txt-black-color:#000;
	--txt-gray01-color:#333;
	--txt-gray02-color:#777;
	--txt-gray03-color:#999;
	--txt-white-color:#fff;
}
:root.darkMode {
	/* common */
	--default-color:#ddd;
    --anchor-color:#ddd;
	/* prime */
	--prime-color:#825fff;
	/* bg */
	--bg-main-color:#1e1f21;
	--bg-sub-color:#262729;
	--bg-third-color:#2d2e30;
	/* border */
	--border-main-color:#444;
	--border-sub-color:#333;
	/* --border-third-color:#fff; */
	/* txt */
	--txt-black-color:#fff;
	--txt-gray01-color:#999;
	--txt-gray02-color:#777;
	--txt-gray03-color:#333;
	--txt-white-color:#000;
}

/* function */
/* drawerNavOn */
html.drawerNavOn,
html.drawerNavOn body {height:100%; overflow:hidden;}
#drawerNav.active {left:0;}
#drawerNav.active ~ .drawerDim {visibility:visible; opacity:1; pointer-events:auto;}
.drawerDim {visibility:hidden; position:fixed; z-index:8; top:0; left:0; width:100%; height:100%; background:rgb(0 0 0 / 50%); opacity:0; pointer-events:none; backdrop-filter: blur(10px);}
/* color mode */
.darkMode .containerWrap .header .tools .settingview .bx-moon {display:block; animation:moonShow 0.3s; animation-timing-function:ease;}
.darkMode .containerWrap .header .tools .settingview .bx-sun {display:none;}

/* UI - accessibility
------------------------------------------------*/
#skipToContent {position:relative; z-index:1000; width:100%; overflow:hidden;}
#skipToContent a {display:block; width:1px; height:1px; margin:0 -1px -1px 0; overflow:hidden; font-size:0; line-height:0; text-align:center; position:fixed; top:0; left:0; background:#b30044; color:#fff;}
#skipToContent a:focus {width:100%; height:auto; margin:0; padding:8px 0; font-size:12px; line-height:1;}


/* UI - LAYOUT
------------------------------------------------*/

/* wrap */
.wrap {display:flex; height:100%; overflow:hidden; background:var(--bg-main-color);}

.containerWrap {width:calc(100% - 0px); height:100%; box-sizing:border-box; }
.wrap:has(.printAdWrap) .containerWrap {width:calc(100% - 200px); border-right:1px solid var(--border-main-color);}
.containerWrap .header {display:flex; justify-content:space-between; align-items:center; height:50px; border-bottom:1px solid var(--border-main-color); box-sizing:border-box;}
.containerWrap .header .title {display:flex; align-items:center; gap:6px; margin:0 20px;}
.containerWrap .header .title a {}
.containerWrap .header .title a h1 {display:flex; align-items:center;}
.containerWrap .header .title a h1 strong {font-size:12px;}
.containerWrap .header .title .moNavi {display:none; position:fixed; z-index:8; left:10px; bottom:10px; width:56px; height:56px; padding:4px; border:2px solid #fff; border-radius:50%; background:var(--prime-color); box-shadow:0px 2px 20px rgb(0 0 0 / 40%);}
.containerWrap .header .title .moNavi .bx {font-size:30px; color:#fff;}
.containerWrap .header .tools {display:flex; align-items:center; gap:10px; margin:0 20px;}
.containerWrap .header .tools .btnTools {padding:6px; border-radius:4px; overflow:hidden;}
.containerWrap .header .tools .btnTools:hover {color:var(--prime-color);}
.containerWrap .header .tools .btnTools i {font-size:26px;}
.containerWrap .header .tools .settingview .bx-sun {animation:sunShow 0.3s; animation-timing-function:ease;}
.containerWrap .header .tools .settingview .bx-moon {display:none;}
.containerWrap .header .manageTools {display:flex; gap:10px;}
.containerWrap .header .manageTools .counterBox {display:flex; gap:6px; background:var(--bg-sub-color); border:1px solid var(--border-sub-color); padding:6px 10px; border-radius:10px;}
.containerWrap .header .manageTools .counterBox strong {font-size:16px; margin-right:6px;}
.containerWrap .header .manageTools .counterBox dl {display:flex; gap:2px; font-size:14px;}
.containerWrap .header .manageTools .counterBox dl dt {}
.containerWrap .header .manageTools .counterBox dl dd {color:var(--prime-color); font-weight:800;}
.containerWrap .header .manageTools .counterBox dl dd .visit {font-size:14px; color:var(--prime-color); font-weight:800; padding:0 2px;}

@keyframes sunShow {
	0% {opacity:0; transform:translate3d(0, -30px, 0);}
	100% {opacity:1; transform:translate3d(0, 0, 0);}
}
@keyframes moonShow {
	0% {opacity:0; transform:translate3d(0, 30px, 0);}
	100% {opacity:1; transform:translate3d(0, 0, 0);}
}

/*  */
.containerWrap .container {display:flex; position:relative; width:calc(100% - 0px); height:calc(100% - 50px);}
/* sideWrap */
.container .sideWrap {display:flex; justify-content:space-between; flex-direction:column; width:240px; height:100%; overflow:auto; background:var(--bg-main-color); border-right:1px solid var(--border-main-color);}
.container .sideWrap .groupTitle {display:block; margin:0 8px 4px; font-size:14px; font-weight:600; color:var(--prime-color);}
.container .sideWrap .gnbWrap {margin:20px;}
.container .sideWrap .gnbWrap .sidLogo {margin:6px 6px 30px; display:none;}
.container .sideWrap .gnbWrap .nav {}
.container .sideWrap .gnbWrap .nav ul {display:flex; flex-direction:column; margin:0; padding:0; list-style:none; gap:0px;}
.container .sideWrap .gnbWrap .nav ul > li {display:block; font-size:12px;}
.container .sideWrap .gnbWrap .nav ul > li > a {display:flex; align-items:center; padding:6px; border-radius:4px; font-size:16px; font-weight:600; gap:6px;}
.container .sideWrap .gnbWrap .nav ul > li > a:hover {background:var(--bg-sub-color); color:var(--prime-color);}
.container .sideWrap .gnbWrap .nav ul > li > a .iconNew {display:flex; align-items:center; padding:2px 3px; border-radius:4px; background:var(--prime-color); color:#fff; font-size:8px; font-weight:800;}
.container .sideWrap .gnbWrap .nav ul > li > a.on {color:var(--prime-color);}
.container .sideWrap .gnbWrap .nav ul > li > a > i {font-size:22px; margin-right:4px;}
.container .sideWrap .gnbWrap .nav ul > li > ul {gap:0;}
.container .sideWrap .gnbWrap .nav ul > li > ul > li {display:flex; align-items:center; gap:10px;}
.container .sideWrap .gnbWrap .nav ul > li > ul > li::before {content:''; display:block; width:1px; height:28px; margin:0 0px 0 18px; background:var(--border-main-color);}
.container .sideWrap .gnbWrap .nav ul > li > ul > li > a {display:flex; align-items:center; width:100%; font-size:14px; font-weight:500; text-indent:4px;}
.container .sideWrap .gnbWrap .nav ul > li > ul > li > a:hover {color:var(--prime-color);}
.container .sideWrap .gnbWrap .nav ul > li > ul > li > a.active {background:var(--prime-color); color:#fff;}
.container .sideWrap .gnbWrap .nav ul > li > ul > li > a.active .iconNew {background:#fff; color:var(--prime-color);}

.container .sideWrap .sideTools {margin:20px;}
.container .sideWrap .sideTools .supportLink {display:flex; flex-direction:column; margin:24px 0;}
.container .sideWrap .sideTools .supportLink h2 {}
.container .sideWrap .sideTools .supportLink ul {list-style:none;}
.container .sideWrap .sideTools .supportLink ul li {margin:0 2px;}
.container .sideWrap .sideTools .supportLink ul li a {display:flex; align-items:center; padding:6px; font-size:14px; gap:6px;}
.container .sideWrap .sideTools .supportLink ul li a .txt {display:flex; align-items:center; justify-content:space-between; width:100%;}
.container .sideWrap .sideTools .supportLink ul li a .txt .visit-num {display:block; padding:2px 5px; border-radius:20px; background:var(--txt-black-color); color:var(--bg-main-color);}
.container .sideWrap .sideTools .supportLink ul li a .bx {font-size:18px;}

.container .sideWrap .sideTools .copyright {display:flex; justify-content:center; align-items:center; padding:10px 0; border-top:1px solid var(--border-sub-color); font-size:11px; color:#999; line-height:1.4;}

/* contentsWrap */
.containerWrap .container .contentsWrap {width:calc(100% - 240px); height:100%;}
.containerWrap .container .contentsWrap[data-ui="index"] {display:flex; flex-direction:column; background:var(--bg-sub-color);}
.containerWrap .container .contentsWrap[data-ui="index"] .mainWrap {height:100%; overflow:auto;}
.containerWrap .container .contentsWrap[data-ui="index"] .mainWrap .mainKv {height:300px; margin:20px; background:var(--bg-main-color); border:1px solid var(--border-main-color); border-radius:14px; box-sizing:border-box; overflow:hidden;}
.containerWrap .container .contentsWrap[data-ui="index"] .mainWrap .itemListWrap {margin:20px; box-sizing:border-box;}
.containerWrap .container .contentsWrap[data-ui="index"] .mainWrap .itemListWrap .itemListHeader {}
.containerWrap .container .contentsWrap[data-ui="index"] .mainWrap .itemListWrap .itemListBody {}
.containerWrap .container .contentsWrap[data-ui="sub"] {display:flex;}
.containerWrap .container .contentsWrap[data-ui="sub"]:has(.memberWrap) {background:var(--bg-sub-color);}

/* printAdWrap */
.printAdWrap {width:200px; height:100%;}
.printAdWrap .ptAdHeader {display:flex; flex-direction:column; justify-content:center; align-items:center; height:50px; border-bottom:1px solid var(--border-main-color); box-sizing:border-box;}
.printAdWrap .ptAdBody {display:flex; flex-direction:column; height:calc(100% - 50px); padding:20px; overflow:auto; box-sizing:border-box; gap:10px;}
.printAdWrap .ptAdBody .ptAdBodyInner {display:flex; justify-content:center; align-items:center; min-height:300px; border:1px solid var(--border-main-color);  background: var(--bg-third-color); font-size:12px; border-radius:6px;}
.printAdWrap .ptAdBody .ptAdBodyInner .ptAdBodyInnerText {padding:20px;}


/* --------------------------------------------------------
UI - searchPop
----------------------------------------------------------*/
/* searchPop */
.searchPop {visibility:hidden; position:fixed; z-index:9999; top:0; width:100%; height:100%; overflow:hidden;}
.searchPop.on {visibility:visible; animation:showPop 0.3s; -webkit-animation:showPop 0.3s;}
.searchPop.on .dim {opacity:1;}
.searchPop.on .search {animation:showConPop 0.3s;-webkit-animation:showConPop 0.3s;}

@keyframes showPop {
	0% {opacity:0;}
	100% {opacity:1;}
}
@-webkit-keyframes showPop {
	0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes showConPop {
	0% {opacity:0; transform:translate3d(0, -600px, 0);}
	100% {opacity:1; transform:translate3d(0, 0, 0);}
}

@keyframes menuSubDepth {
	0% {opacity:0; transform:translate3d(0, -20px, 0);}
	100% {opacity:1; transform:translate3d(0, 0, 0);}
}


.searchPop.off {animation:hidePop 0.4s;-webkit-animation:hidePop 0.4s;}
.searchPop.off .dim {opacity:1;}
.searchPop.off .search {animation:hideConPop 0.4s;-webkit-animation:hideConPop 0.4s;}

@keyframes hidePop {0% {opacity:1;}
 100% {opacity:0;}
}
@-webkit-keyframes hidePop {0% {opacity:1;}
 100% {opacity:0;}
}
@keyframes hideConPop {0% {opacity:1; transform:translate3d(0, 0, 0);}
 100% {opacity:0; transform:translate3d(0, -600px, 0);}
}
@-webkit-keyframes hideConPop {0% {opacity:1; -webkit-transform:translate3d(0, 0, 0);}
 100% {opacity:0; -webkit-transform:translate3d(0, -600px, 0);}
}

.searchPop .dim {position:absolute; z-index:1; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.2); opacity:0;}
.searchPop .search {position:relative; z-index:2; width:600px; margin:0 auto; margin-top:60px; border-radius:18px; background:rgb(0 0 0 / 60%); box-sizing:border-box; backdrop-filter:blur(10px);}
.searchPop .search h2 {display:none; padding:20px; color:var(--prime-color); font-size:16px; font-weight:600; font-weight:500; box-sizing:border-box;}
.searchPop .search form {position:relative; padding:10px 20px;}
.searchPop .search form input[type=text] {width:100%; height:40px; padding:0; border:0; border-radius:0; background:transparent; color:#fff; font-size:16px; font-weight:400; line-height:40px;}
.searchPop .search form input[type=text]:focus {outline:none; box-shadow:none; color:#fff;}
.searchPop .search form #sch_stx:valid ~ button {background:#fff; opacity:1; color:#333; pointer-events:auto;}
.searchPop .search form button {display:flex; justify-content:center; align-items:center; position:absolute; top:16px; right:10px; width:30px; height:30px; border-radius:50%; opacity:0.5; color:#fff; font-size:26px; transition:all 0s ease 0s;pointer-events:none;}
.searchPop .search form button:hover {color:#999;}

/* --------------------------------------------------------
RESPONSE
----------------------------------------------------------*/
@media (max-width:1280px) {
	.containerWrap {width:calc(100% - 0px);}
	.containerWrap .header .title .moNavi {display:block;}
	.containerWrap .container .sideWrap {position:fixed; z-index:9; top:0; left:-240px; bottom:0; transition:all .2s cubic-bezier(.7,0,.3,1);transform:all .2s cubic-bezier(.7,0,.3,1);-webkit-transition:all .2s cubic-bezier(.7,0,.3,1);}
	.containerWrap .container .sideWrap.active {left:0;}
	.container .sideWrap .gnbWrap .sidLogo {display:block;}
	.containerWrap .container .contentsWrap[data-ui="sub"] {width:calc(100% - 0px);}
	.containerWrap .container .contentsWrap[data-ui="index"] {width:calc(100% - 0px);}
	
}

@media (max-width:1024px) {
	html,body {height:unset;}
	.containerWrap .header .manageTools {display:none;}
	.containerWrap .container .contentsWrap[data-ui="sub"] {flex-direction:column;}
	.containerWrap .header .title,
	.containerWrap .header .tools {margin:0 10px; gap:4px;}
	.containerWrap .container .contentsWrap[data-ui="index"] .mainWrap .mainKv {margin:10px;}
	.containerWrap .container .contentsWrap[data-ui="index"] .mainWrap .itemListWrap {margin:0 10px;}
	.boardListWrap {width:100%; min-width:100%; margin-bottom:60px; order:2;}
	.boardViewWrap {width:100%; order:1;}
	/* .ftad {display:none;} */
}

@media (max-width:768px) {
	.searchPop .search {width:320px;}
}