/* common */
html{width:100%;height:100%;font-size:16px}
body{width:100%;height:100%;background-color:#fff;word-wrap:break-word;word-break:break-all}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
body,input,textarea,select,button,table{font-size:14px;font-family:'나눔고딕',NanumGothic,'맑은 고딕','Malgun Gothic','돋움',Dotum,'굴림',Gulim,Helvetica;line-height:1.25em}
body.s,.s input,.s textarea,.s select,.s button,.s table{font-family:Helvetica}
body{position:relative;background-color:#fff;color:#000;-webkit-text-size-adjust:none}
img,fieldset{border:0}
ul,ol{list-style:none}
em,address{font-style:normal}
a{color:#000;text-decoration:none}
table{border-collapse:collapse}
hr{display:none !important}
button:hover{cursor:pointer}
.is_mobile {position:fixed;top:0;left:0;width:100%;height:100%;}

/* wrapper */
#wrapper{overflow:hidden;width:100%;height:100%}
/* header */
.header{float:left;position:relative;height:100%}
.header__inner{overflow-y:auto;position:relative;width:410px;height:100%;padding:0 14px;border-right:1px solid #dfdfdf;-webkit-box-sizeing:border-box;box-sizing:border-box}
.pcview .header__inner {width:350px;}
.header__title{padding:1em 2em .9em .1em;border-bottom:3px solid #222;font-size:1.2em}
.header__title-sub{padding:2em .1em .4em;border-bottom:1px solid #000;font-size:1em;clear:both}
.header__title-sub2{padding:1em .1em .4em;border-bottom:1px dotted #888;font-size:1em;clear:both}
.header__title-sub2:before {display:inline-block;margin-right:.25em;border:2px solid transparent;border-left-color:#000;vertical-align:3px;content:''}
.header__nav--upper{overflow-y:auto;position:absolute;top:0;left:-300px;padding:0 10px;width:300px;height:100%;border-right:1px solid #dfdfdf;background-color:#fff;-webkit-box-sizeing:border-box;box-sizing:border-box}
.header__nav__list{font-size:.9em}
.header__nav__list:last-child{margin-bottom:7.1rem}
.header__nav__list li{border-bottom:1px solid #dfdfdf}
.header__nav__list li:hover{background:#eee}
.header__nav__list li span.flag:not(:last-of-type) {display: none}
.header__nav__list a{display:block;padding:.7em .3rem .6em .3rem}
.header__nav__list a span{margin-left:.4em;font-size:.86em;color:#909090}
.header__nav__list a .label{border:1px solid red;border-radius:30px;padding:2px 5px;color:red}
.header__nav__list a[data-select=true]{background:#6e6e6e;color:#fff}
.header__nav__list a[data-select=true] span{color:#fff}
.header__nav__list a[data-select=true] .label{border-color:#fff;color:#fff}
.header__nav__list .txt-code{display:block;padding:0 .3rem .7em;font-size:.9em;color:#909090;cursor:pointer}
.header__nav__list a[data-select=true]+.txt-code{padding-top:.3rem;background:#373737;color:#fff}
.author{margin:0;padding:6px 2px 2px;background:#f4f4f4;font-size:.86em;line-height:1.6em;color:#333;text-align:center}
.author dd{display:block;color:#aaa}

/* button */
.btn{position:absolute;top:0;right:0;width:50px;height:50px;border:0;background:none;color:transparent}
.btn:before,.btn:after{position:absolute;top:50%;left:50%;background:#000;content:''}
.btn--open:before{width:20px;height:2px;margin-top:-5px;margin-left:-10px}
.btn--open:after{left:50%;width:20px;height:2px;margin-top:5px;margin-left:-10px}
.btn--close:before{width:2px;height:20px;margin-top:-10px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.btn--close:after{width:2px;height:20px;margin-top:-10px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
/* page */
.page{overflow:hidden;overflow-x:auto;overflow-y:auto;height:100%;padding:50px;white-space:nowrap;-webkit-box-sizeing:border-box;box-sizing:border-box}
.page__title{display:block;position:relative;font-size:1.4rem;margin-bottom:2rem; padding-top:5px;}
.page__size{font-size:1rem; margin-bottom:5px;}
.page__viewer{display:inline-block;position:relative;margin-right:3.5rem;border:1px solid #000;vertical-align:top}
.page__viewer iframe{display:block;width:767px;height:640px}
.page__viewer button{overflow:hidden;position:absolute;bottom:-10px;right:-10px;z-index:110;width:30px;height:30px;border:0;border-radius:10px;background:none;color:transparent;outline:0;cursor:nw-resize}
.page__viewer .dimmed:after{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;background:url(about:blank);content:''}
.page__viewer .dimmed.is_drag:after{display:block}
.page__info{display:inline-block;overflow:hidden;width:50%;vertical-align:top;white-space:normal}
.page__info__item{overflow:hidden;margin-top:1rem}
.page__info__item:first-child{margin-top:0}
.page__info__item .title{display:block;float:left}
.page__info__item .desc{display:block;overflow:hidden;padding-left:.5rem}
.page__info__item a{color:#00f}
.page__info__item a:hover{text-decoration:underline}

.header.is_open{margin-left:300px}
.is_open .btn--open{display:none}
.is_mobile .header.is_open{margin-left:0}
.is_mobile .header__nav--upper {display:none;left:initial;right:0;border-left:1px solid #dfdfdf;}
.is_mobile .is_open .header__nav--upper {display:block}
.is_mobile .header{float:none;width:100%;border-right:0}
.is_mobile .header .header__inner{width:auto}
.is_mobile .page{display:none}

/*추가*/
.page__viewer iframe {
	display: block;
	width: 410px;
	height: 700px
}
.pcview .page__viewer iframe {
	width: 1020px;
	height: 800px
}
.flag {
	height: 20px;
	font-size: 12px;
	font-weight: normal;
	color: #fff !important;
	padding: 2px 8px;
	border-radius: 10px;
	vertical-align: middle;
	margin-right: 5px;
}
.flag.stop {
	background-color: gray
}
.flag.board {
	background-color: #ff7b00
}
.flag.content {
	background-color: #1f75ec
}
.flag.mod {
	background-color: red
}
.flag.mod::after {
	display:inline;
	content:" 수정";
}
.flag.add {
	background-color: indigo
}
.flag.add::after {
	display:inline;
	content:" 추가";
}
.flag.com {
	display: none;
	background-color: yellow;
	color: #000 !important;
}
.complete, .com {
	color: #440db4;
	font-weight: bold;
}
.header__nav__list a.complete::before, .header__nav__list a.com::before {
	content: "완료";
	display: inline-block;
	font-size: .86em;
	font-weight: normal;
	color: #fff !important;
	padding: 0 8px;
	border-radius: 10px;
	vertical-align: middle;
	background: #eb5c5c;
}