@charset "utf-8"; 
/* copyright(c) WEBsiting.co.kr */
/* 매뉴얼마스터 추가된 기능 및 레이아웃 관련 */

/* 입력폼 */
#mmSetBoxWr{visibility:hidden; position:fixed; z-index:9999999999999999999999998; left:0px; right:0px; top:100%; bottom:-100%;  overflow:hidden; 
	display:flex;align-items: center; justify-content: center;
	-webkit-transition-duration: 0s; -webkit-transition-timing-function: ease; transition-duration: 0s; transition-timing-function: ease;
	}
#mmSetBoxAside{cursor:pointer; content:'';display:block;position:fixed; z-index:99999999999999999999999; left:0px; right:0px; top:0px; bottom:0px;  background:RGBA(3,7,18,0.8);}
#mmSetBox{width:98%; max-width:800px; margin:0 auto; max-height:100%; position:relative; z-index:9999999999999999999999999; overflow:hidden; border-radius:10px; box-shadow:0px 0px 10px rgba(0,0,0,0.1),0px 0px 14px rgba(0,0,0,0.1),0px 0px 10px rgba(0,0,0,0.1);}
#mmSetBoxWr.on{visibility:visible; top:0px; bottom:0px; 
	-webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease; transition-duration: 0.2s; transition-timing-function: ease;
	}
#mmSetBoxWr.on #mmSetBox{overflow:auto;}
.colorpicker{z-index:99999999999999999999999999}
#wstFormWr{position:relative; font-family:"Noto Sans KR", "Malgun Gothic", sans-serif !important;}
.wstFormTit{background:#5250f7; position:sticky; top:0; z-index:999999999999999999999999999; overflow:hidden; font-size:18px; color:#fff;}
.wstFormTit b{ padding:15px; display:inline-block;}
.wstFormTit small{font-weight:normal; display:inline-block;}
.wstFormTit > p{ font-size:13px; right:0px; top:0px; text-align:right; float:right; padding:8px; border-radius:0 0 0 8px;}
.wstFormTit > p a{display:inline-block; text-align:center; border:0px; padding:10px 5px; margin-right:5px; color:#fff; border:0; border-radius:5px; vertical-align:middle; cursor:pointer;}
.wstFormTit > p a i{opacity:100%;}
.wstFormTit > p a:hover{opacity:50%;}
.wstFormTit > p button{display:inline-block; text-align:center; border:0px; padding:10px; color:#fff; font-weight:bold; background:#000; border:1px solid #000; border-radius:5px; vertical-align:middle;}
.wstFormTit > p button:hover{color:#5cd4ff; border:1px solid #5cd4ff;}
.wstFormTit > p button i{margin-left:3px;}

.wstForm{max-width:800px;margin:0 auto; padding:5px; overflow:hidden; background:#fff; border-radius:5px;}
.wstForm i{opacity:30%;}
.wstForm > div{ padding:8px; border-bottom:1px dashed #ddd; overflow:hidden; position:relative;}
.wstForm > div{width:50%; min-height:60px; float:left;}
.wstForm > div.wstF100{width:100%; float:none;}
.wstForm > div b{display:block; padding-bottom:5px; font-size:12px;}
.wstForm > div b small{font-size:11px; color:#999; font-weight:normal;}
.wstForm > div p{position:relative;}
.wstForm > div p input[type=text]{display:block; margin:3px 0; padding:0 10px; height:32px; line-height:32px; width:100%; border:1px solid #ddd; border-radius:5px;}
.wstForm > div p label{position:relative;}
.wstForm > div p label span{position:relative; display:inline-block; margin:3px 1px; cursor:pointer; color:#777; padding:0 10px; height:32px; line-height:32px; border:1px solid #ddd; border-radius:5px;}
.wstForm > div p label:hover span{border:1px solid #999;}
.wstForm > div p label span i{display:inline-block; vertical-align:middle; margin-right:3px;}
.wstForm > div p label span u{text-decoration:none; font-weight:bold;}
.wstForm > div p label span em{display:none; font-style:normal; font-weight:bold;}
.wstForm > div p label input{display:block; position:absolute; left:0px; top:0px; opacity:0;}
.wstForm > div p label input[type=radio]:checked + span{background:#f0eff7; border:1px solid #d7d6e2; color:#000; font-weight:bold;}
.wstForm > div p label input:checked + span i{opacity:1; color:#2d1f96;}
.wstForm > div p label input:checked + span u{display:none;}
.wstForm > div p label input:checked + span em{display:inline;}

/* 체므박스의 경우 반대 스타일 지정*/
.wstForm > div p label.chbstyl span{background:#f0eff7; border:1px solid #d7d6e2; color:#000; font-weight:bold;}
.wstForm > div p label.chbstyl span i{opacity:1; color:#2d1f96;}
.wstForm > div p label.chbstyl input:checked + span{background:#fff; border:1px solid #ddd; color:#777; font-weight:bold;}
.wstForm > div p label.chbstyl input:checked + span i{opacity:30%; color:#2d1f96;}

.wstForm > div p select{display:block; margin:3px 0; padding:0 10px; height:32px; line-height:32px; width:100%; border:1px solid #ddd; border-radius:5px;}
.wstForm > div p label.bo_themeLB{position:absolute; right:3px; top:0px; }
.wstForm > div p label.bo_themeLB span{background:#000; color:#fff; height:26px; line-height:26px;}
.wstForm .btnSubmit100{display:block; width:100%; text-align:right;padding:10px 15px; color:#000; font-weight:bold; background:#fff; border:1px solid #efefef; border-radius:5px;}
.wstForm h3{padding:8px; font-size:13px; border-top:1px solid #ddd; clear:both;}
.wstForm h3 small{font-weight:normal; font-size:11px; display:block; color:#1447e6;padding:8px; background:#eff6ff; margin-top:5px; border-radius:5px;}
.wstForm h3 small:hover{background:#dbeafe;}
.wstForm small.rdc{font-weight:normal; font-size:11px; display:block; color:#2e8c4f;padding:8px; background:#f0fdf4; margin-top:5px; border-radius:5px;}
.wstForm small:hover.rdc{background:#ddf4e4;}

@media all and (max-width: 800px)
{
	.wstForm > div{width:100%; float:none;}
}

/* 목록 감싸기 */
#wstMPwr{position:relative; }
#wstMPwr:after{content:'';display:block; clear:both;}
.wstMPright{float:right; width: calc(100% - 270px); overflow:hidden; }

#wstMPnav{left:0px; float:left; width:240px; max-height:100%; overflow:auto; background:RGBA(255,255,255,0.05); border:1px solid RGBA(0,0,0,0.1); border-radius:10px;}
#wstMPnav h2{position:sticky; background:RGBA(255,255,255,1); z-index:2; top:0; border-bottom:1px solid RGBA(0,0,0,0.08);}
#wstMPnav h2 > a{display:block; font-size:14px; padding:15px 15px 10px;}
#wstMPnav #subListTopSch{margin:0 15px 15px; overflow:hidden; position:relative; z-index:2;}
#wstMPnav #subListTopSch .SLTschKey{display:block; width:100%; padding:0 30px 0 5px; height:30px; line-height:30px; border:1px solid #ddd; border-radius:3px;}
#wstMPnav #subListTopSch button{display:block; border:0px; background:transparent; width:30px; height:30px; line-height:30px; text-align:center;
		position:absolute; right:0px; top:0px;
		}
#wstMPnav ul{width:100%; padding:10px;}
#wstMPnav ul li{}
#wstMPnav ul li a{display:block; padding:8px 10px 8px 15px; border-radius:5px; font-size:13px;word-break:break-all; position:relative;}
#wstMPnav ul li > a i{opacity:30%;}
#wstMPnav ul li a:hover{background:RGBA(0,0,0,0.03);}
#wstMPnav ul li a.catPar .onIco{display:none;}
#wstMPnav ul li a.cat{padding:10px 20px 10px 10px; font-weight:bold; border-top:1px solid RGBA(0,0,0,0.07); position:relative;}
#wstMPnav ul li a.cat i{display:block; position:absolute; right:8px; top:14px;}
#wstMPnav ul li.noCat{border-top:1px solid RGBA(0,0,0,0.07);}
#wstMPnav ul li:first-child a.cat,
#wstMPnav ul li:first-child.noCat{border-top:0px;}
#wstMPnav ul li:last-child.noCat{border-top:0px;}
#wstMPnav ul li a.on{color:#fff; background:#000; }
#wstMPnav ul li > p em{padding:10px; background:RGBA(0,0,0,0.02); border-radius:3px; display:block; overflow:hidden; position:relative; z-index:1;} 
#wstMPnav ul li > p em:before{content:''; display:block; position:absolute; left:0px; right:0px; top:0px; bottom:0px; background:RGBA(0,0,0,0.02); opacity:2%;}
#wstMPnav ul li > p em a{padding:6px 10px; font-size:12px; font-style:normal; position:relative; z-index:2;}
#wstMPnav ul li > p em a:before{display:block; position:absolute; left:0px; top:6px; color:RGBA(0,0,0,0.5);}

#wstMPnav ul li > p em a.vstl2{padding-left:20px;}
#wstMPnav ul li > p em a.vstl2:before{content:'└️ '; left:5px;}
#wstMPnav ul li > p em a.vstl3{padding-left:30px;}
#wstMPnav ul li > p em a.vstl3:before{content:'└ '; left:15px;}
#wstMPnav ul li > p em a.vstl4{padding-left:40px;}
#wstMPnav ul li > p em a.vstl4:before{content:'└ '; left:25px;}
#wstMPnav ul li > p em a.vstl5{padding-left:50px;}
#wstMPnav ul li > p em a.vstl5:before{content:'└ '; left:35px;}

#wstMPnav .noDataAr{text-align:center; padding:30px;}
#wstMPnav .noDataAr i{display:block; font-size:47px; color:#efefef;}
#wstMPnav .noDataAr b{display:block; font-size:20px; color:#ddd;}

/* 목차배경 테마색으로 */
#wstMPnav.wstMPnavListTheme{color:#fff; background:#333333;}
#wstMPnav.wstMPnavListTheme a{color:#fff;}
#wstMPnav.wstMPnavListTheme h2{color:#fff; background:#333333;}
#wstMPnav.wstMPnavListTheme h2 a{position:relative; z-index:2;}
#wstMPnav.wstMPnavListTheme h2:before{content:'';display:block; position:absolute; z-index:1; left:0px; right:0px; top:0px; bottom:0px; background:RGBA(0,0,0,0.1);}
#wstMPnav.wstMPnavListTheme #subListTopSch .SLTschKey{border:1px solid RGBA(255,255,255,0.08); background:RGBA(255,255,255,0.05); color:#fff;}
#wstMPnav.wstMPnavListTheme #subListTopSch .SLTschKey::placeholder{color:RGBA(255,255,255,0.5);}
#wstMPnav.wstMPnavListTheme #subListTopSch button{color:#fff;}
#wstMPnav.wstMPnavListTheme ul li a{color:RGBA(255,255,255,0.8);}
#wstMPnav.wstMPnavListTheme ul li a:hover{background:RGBA(255,255,255,0.06);}
#wstMPnav.wstMPnavListTheme ul li.catPar a{color:#fff;}
#wstMPnav.wstMPnavListTheme ul li a.on{background:#fff !important; color:#111;}
#wstMPnav.wstMPnavListTheme ul li > p em{background:RGBA(0,0,0,0.08);}

/* 목차 라인 좌측 또는 우측 */
#wstMPnav.wstMPnavListLine{border:0px; border-radius:0px;}
#wstMPnav.wstMPnavListLine:after{content:''; display:block; position:absolute; left:240px; top:0px; bottom:0px; width:1px; background:RGBA(0,0,0,0.1);}

/* 목차 라인 블러 */
#wstMPnav.wstMPnavListBlur{border:0px; 
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);}

.mListRight #wstMPnav.wstMPnavListLine{border:0px !important;}
.mListRight #wstMPnav.wstMPnavListLine:after{left:auto; right:240px;}

.wstMPmenuBtn,
.wstMPmenuBtnView,
.wstBtnMwNavX{display:none;}


@media all and (max-width: 800px)
{	
	#wstMPnav{background:#fff; border-radius:0px; float:none; position:fixed; width:260px; left:-300px; top:0px; bottom:0px; z-index:999999999999999999999999999999;
		-webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease; transition-duration: 0.4s; transition-timing-function: ease;
		}
	#wstMPnav h2{box-shadow:0px 0px 10px rgba(0,0,0,0.05),0px 0px 14px rgba(0,0,0,0.05),0px 0px 10px rgba(0,0,0,0.05);}
	#wstMPwr{}
	.wstMPright{float:none; width:auto; display:block;}
	.wstMPnavOn #wstMPnav,
	.wstMPnavOnView #wstMPnav{left:0px;}
	.wstMPnavOn .wstMPmenuBtnCover,
	.wstMPnavOnView .wstMPmenuBtnCoverView{display:block; position:fixed; left:0px; right:0px; top:0px; bottom:0px; z-index:999999999999999999999999999998;
		cursor:pointer;background:RGBA(0,0,0,0.5);
		}

	.wstMPmenuBtnPr{display:block; overflow:hidden; padding:12px; border:1px solid RGBA(0,0,0,0.2); border-radius:4px; overflow:hidden; font-weight:bold;}
	.wstMPmenuBtnPr i{display:inline-block; float:right;font-size:16px; vertical-align:middle; opacity:30%;}

	.wstBtnMwNavX{display:block;width:100%; position:sticky; bottom:0; z-index:2; height:40px; line-height:40px; text-align:center; font-weight:bold; background:#fff; color:#111; cursor:pointer;
		box-shadow:0px 0px 10px rgba(0,0,0,0.05),0px 0px 14px rgba(0,0,0,0.05),0px 0px 10px rgba(0,0,0,0.05);
		}
	#wstMPnav.wstMPnavListTheme .wstBtnMwNavX{}
	#wstMPnav.wstMPnavListTheme .wstBtnMwNavX:before{content:'';display:block;position:absolute; left:0px; right:0px; top:0px; bottom:0px;background:RGBA(255,255,255,0.07);}

	#wstMPnav.wstMPnavListLine:after{display:none !important;}
}

/* 매뉴얼 목차 위치 오른쪽일 경우 세팅 */
.mListRight{}
.mListRight #wstMPnav{float:right;}
.mListRight .wstMPright{float:left;}

/* 매뉴얼 목차 사용하지 않는 경우 세팅 */
.mList100{}
.mList100 #wstMPnav{display:none;}
.mList100 .wstMPright{float:none; width:auto; display:block;}

@media all and (max-width: 800px)
{	
	.mListRight #wstMPnav{left:auto; right:-300px;}
	.mListRight .wstMPright{float:none; width:auto;}
	.wstMPnavOn .mListRight #wstMPnav,
	.wstMPnavOnView .mListRight #wstMPnav{left:auto; right:0px;}
}


/* 프린트 설정 */
@media print {
	@page { size: A4 portrait !important;} /* 세로 인쇄 */

	/* 프린트 제외 */
	.wstMPmenuBtn,
	.wstMPmenuBtnView,
	.mm_v_ip,
	#mm_v_info > p,
	#mm_v_top,
	#mmcomtWr,
	#mm_v_con pre .btnWstCodeCp,
	.mm_v_tbn{display:none !important;}
	#mm_v_con pre {white-space: pre-wrap; word-break: break-all;}
}


/* 완료 팝업 내용 */
.ok-popup {position: fixed;bottom: 5%;right: 5%; max-width:90%; transform:scale(0.8);opacity: 0;pointer-events: none;transition: all 0.3s ease;z-index: 9999;cursor:pointer;}
.ok-popup .popup-content {background: #fff;color: #111827;font-weight: 600;font-size: 1.125rem;border-radius: 0.7rem;padding: 60px;box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);transform: scale(0.95);min-width:280px;animation: bouncePop 0.3s ease;}
.ok-popup .popup-content {text-align:center;}
.ok-popup .popup-content strong{display:block; font-size:30px; color:#222; padding-bottom:30px;}
.ok-popup .popup-content b{display:block; }
.ok-popup .popup-content i{display:block; color:#c6d2ff; font-size:77px;}
.ok-popup .popup-content small{display:block; font-size:12px; color:#999;}
.ok-popup .popup-content a{display:inline-block; padding:8px 30px; margin-top:30px; background:#4f46e5; border-radius:4px; color:#fff; font-size:14px; cursor:pointer;}
.ok-popup.show {opacity: 1;transform: scale(1);pointer-events: auto;}
@keyframes bouncePop {0% { transform: scale(0.7); opacity: 0; }60%{ transform: scale(1.1); opacity: 1; }100% { transform: scale(1); }}