/* @import url("http://fonts.googleapis.com/earlyaccess/notosanskr.css"); */

@font-face {
  font-family:"TS_mobile";
  src:  local("TS_mobile"),
        url("../../../html5/html5_font/TS-Mobile.woff2?version=2") format('woff2'),
        url("../../../html5/html5_font/TS_mobile.woff?v=2") format('woff');
  font-style: normal;
  font-weight: normal;
  unicode-range: U+0-10FFFF;
}

*{

  margin:0;
  padding:0;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

html,body{
  /* font-family: 'Noto Sans KR', sans-serif; */
  font-family: 'TS_mobile', sans-serif;

  /* direction: rtl; */
  /* background-color:rgba(229,218,183,1); */
}

body{
	background-color:#fcfcfc;
	margin:0;
	padding:0;
  overflow:hidden;
}

.book-control{
  position:absolute;
  left:0;
  top:0;
  height:100px;
}

.book-viewport{

}
.book-viewport .container{
	position:absolute;
	top:50%;
	left:50%;

	/* width:922px;
	height:600px; */
	margin:auto;
}

.book-viewport .book{
	/* width:922px;
	height:600px;
	left:-461px;
	top:-300px; */
  font-family:TS_mobile;
}

.book-viewport .page{
	/* width:461px;
	height:600px; */
	background-color:white;
	/* background-repeat:no-repeat; */
	/* background-size:100% 100%; */
}

.book-viewport .zoomer .region{
	display:none;
}

.book .region{
	position:absolute;
	overflow:hidden;
	background:#0066FF;
	opacity:0.2;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-ms-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
	cursor:pointer;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
}

.book .region:hover{
	opacity:0.5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
}

.book .region.zoom{
	opacity:0.01;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
	filter: alpha(opacity=1);
}

.book .region.zoom:hover{
	opacity:0.2;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
}

.book .page{
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
	box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.book-viewport .page img{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin:0;
}

.book .even .gradient{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

	background:-webkit-gradient(linear, left top, right top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.2)));
	background-image:-webkit-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:-moz-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:-ms-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:-o-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
}

.book .odd .gradient{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

	background:-webkit-gradient(linear, right top, left top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.15)));
	background-image:-webkit-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:-moz-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:-ms-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:-o-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
}

.book-viewport .zoom-in .even .gradient,
.book-viewport .zoom-in .odd .gradient{

	display:none;

}

.book-viewport .loader{
	background-image:url(../pics/loader.gif);
	width:22px;
	height:22px;
	position:absolute;
	top:280px;
	left:219px;
}

.book-viewport .shadow{
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow:0 0 20px #ccc;
	-moz-box-shadow:0 0 20px #ccc;
	-o-box-shadow:0 0 20px #ccc;
	-ms-box-shadow:0 0 20px #ccc;
	box-shadow:0 0 20px #ccc;
}

.book-viewport .next-button,
.book-viewport .previous-button{
	width:22px;
	height:600px;
	position:absolute;
	top:0;
}

.book-viewport .next-button{
	right:-22px;
	-webkit-border-radius:0 15px 15px 0;
	-moz-border-radius:0 15px 15px 0;
	-ms-border-radius:0 15px 15px 0;
	-o-border-radius:0 15px 15px 0;
	border-radius:0 15px 15px 0;
}

.book-viewport .previous-button{
	left:-22px;
	-webkit-border-radius:15px 0 0 15px;
	-moz-border-radius:15px 0 0 15px;
	-ms-border-radius:15px 0 0 15px;
	-o-border-radius:15px 0 0 15px;
	border-radius:15px 0 0 15px;
}

.book-viewport .previous-button-hover,
.book-viewport .next-button-hover{
	background-color:rgba(0,0,0, 0.2);
}

.book-viewport .previous-button-hover,
.book-viewport .previous-button-down{
	background-image:url(../pics/arrows.png);
	background-position:-4px 284px;
	background-repeat:no-repeat;
}

.book-viewport .previous-button-down,
.book-viewport .next-button-down{
	background-color:rgba(0,0,0, 0.4);
}

.book-viewport .next-button-hover,
.book-viewport .next-button-down{
	background-image:url(../pics/arrows.png);
	background-position:-38px 284px;
	background-repeat:no-repeat;
}

.book-viewport .zoom-in .next-button,
.book-viewport .zoom-in .previous-button{
	display:none;
}

.animated{
	-webkit-transition:margin-left 0.5s;
	-moz-transition:margin-left 0.5s;
	-ms-transition:margin-left 0.5s;
	-o-transition:margin-left 0.5s;
	transition:margin-left 0.5s;
}

.thumbnails{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:140px;
	z-index:1;
}

.thumbnails > div{
	width:1050px;
	height:100px;
	margin:20px auto;
}

.thumbnails ul{
	margin:0;
	padding:0;
	text-align:center;
	-webkit-transform:scale3d(0.5, 0.5, 1);
	-moz-transform:scale3d(0.5, 0.5, 1);
	-o-transform:scale3d(0.5, 0.5, 1);
	-ms-transform:scale3d(0.5, 0.5, 1);
	transform:scale3d(0.5, 0.5, 1);
	-webkit-transition:-webkit-transform ease-in-out 100ms;
	-moz-transition:-moz-transform ease-in-out 100ms;
	-ms-transition:-ms-transform ease-in-out 100ms;
	-o-transition:-o-transform ease-in-out 100ms;
	transition:transform ease-in-out 100ms;
}

.thumbanils-touch ul{
	-webkit-transform:none;
	-moz-transform:none;
	-o-transform:none;
	-ms-transform:none;
	transform:none;
}

.thumbnails-hover ul{
	-webkit-transform:scale3d(0.6, 0.6, 1);
	-moz-transform:scale3d(0.6, 0.6, 1);
	-o-transform:scale3d(0.6, 0.6, 1);
	-ms-transform:scale3d(0.6, 0.6, 1);
	transform:scale3d(0.6, 0.6, 1);
}

.thumbnails li{
	list-style:none;
	display:inline-block;
	margin:0 5px;
	-webkit-box-shadow:0 0 10px #ccc;
	-moz-box-shadow:0 0 10px #ccc;
	-ms-box-shadow:0 0 10px #ccc;
	-o-box-shadow:0 0 10px #ccc;
	box-shadow:0 0 10px  #ccc;
	-webkit-transition:-webkit-transform 60ms;
	-moz-transition:-webkit-transform 60ms;
	-o-transition:-webkit-transform 60ms;
	-ms-transition:-webkit-transform 60ms;
	transition:-webkit-transform 60ms;
}

.thumbnails li span{
	display:none;
}

.thumbnails .current{
	-webkit-box-shadow:0 0 10px red;
	-moz-box-shadow:0 0 10px red;
	-ms-box-shadow:0 0 10px red;
	-o-box-shadow:0 0 10px red;
	box-shadow:0 0 10px red;
}

.thumbnails .thumb-hover{
	-webkit-transform:scale3d(1.3, 1.3, 1);
	-moz-transform:scale3d(1.3, 1.3, 1);
	-o-transform:scale3d(1.3, 1.3, 1);
	-ms-transform:scale3d(1.3, 1.3, 1);
	transform:scale3d(1.3, 1.3, 1);

	-webkit-box-shadow:0 0 10px #666;
	-moz-box-shadow:0 0 10px #666;
	-ms-box-shadow:0 0 10px #666;
	-o-box-shadow:0 0 10px #666;
	box-shadow:0 0 10px #666;
}

.thumbanils-touch .thumb-hover{
	-webkit-transform:none;
	-moz-transform:none;
	-o-transform:none;
	-ms-transform:none;
	transform:none;
}

.thumbnails .thumb-hover span{
	position:absolute;
	bottom:-30px;
	left:0;
	z-index:2;
	width:100%;
	height:30px;
	font:bold 15px arial;
	line-height:30px;
	color:#666;
	display:block;
	cursor:default;
}

.thumbnails img{
	float:left;
}

.exit-message{
	position: absolute;
	top:10px;
	left:0;
	width:100%;
	height:40px;
	z-index:10000;
}

.exit-message > div{
	width:140px;
	height:30px;
	margin:auto;
	background:rgba(0,0,0,0.5);
	text-align:center;
	font:12px arial;
	line-height:30px;
	color:white;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-ms-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
}

.zoom-icon{
	position:absolute;
	z-index:1000;
	width:22px;
	height:22px;
	top:10px;
	right:10px;
	background-image:url(../pics/zoom-icons.png);
	background-size:88px 22px;
}
.zoom-icon{
  position:relative;
  right:auto;
  left:0;
  top:0;
  width:auto;
  height:auto;
  line-height:1;

}

.zoom-icon-in{
	background-position:0 0;
	cursor: pointer;
}

.zoom-icon-in.zoom-icon-in-hover{
	background-position:-22px 0;
	cursor: pointer;
}

.zoom-icon-out{
	background-position:-44px 0;
}

.zoom-icon-out.zoom-icon-out-hover{
	background-position:-66px 0;
	cursor: pointer;
}

.bottom{
	position:absolute;
	left:0;
	bottom:0;
}

/* ############################
  Fixed
############################  */

/* Gnb */
.gnb{
  display:block;
  background-color:#656774;
  height:38px;
  line-height:38px;
  font-size:1;
  overflow:hidden;
  text-align:center;
}
.gnb ul{display:inline-block;}
.gnb ul.gnb-left{float:left;}
.gnb ul.gnb-center{}
.gnb ul.gnb-right{float:right;}
.gnb ul li{display:table-cell;vertical-align:middle;}
.gnb img{
  display:block;
  border:0;
  cursor:pointer;
}
.gnb li.str_go{line-height: 1;}
.gnb li.str_go label{float:left;margin:0 .3em;}
.gnb li.str_go label span,
.gnb li.str_go label img,
.gnb li.str_go label input[type="text"]{
  display:inline-block;
  float:left;
  height:26px;
  line-height:26px;
}
.gnb li.str_go label input[type="text"]{
  background-color:#555661;
  border-width:1px 0 1px 1px;
  border-style: solid;
  border-color:#000 #9a9ba4 #9a9ba4 #000;
  width:31px;
  text-align:center;
  color:#fff;
}
.gnb li.str_go label input[name="str_bookNo"]{
  width:32px;
}

#canvas{
}

.book-control{
  z-index:999999999;
  position:absolute;
  top:38px;
  height:38px;
}
.book-control button{
  height:auto;
  width:auto;
  padding:1em;
  line-height: 1;
  border:0;
  float:left;
  margin-right:.3em;
  height:38px;
}

.paging-top{
  position:absolute;
  top:-20px;
  color:#000;
  font-weight:500;
}
.paging-top.right{
  right:0;
}
.paging-top.left{
  left:0;
}

.paging-side{
  position:absolute;
  top:0;
  color:#000;
  font-weight:400;
  height:100%;
  text-align:center;
  vertical-align:middle;
  writing-mode: tb-rl;
  -webkit-writing-mode: tb-rl;
  -moz-writing-mode: tb-rl;
  -o-writing-mode: tb-rl;
  -ms-writing-mode: tb-rl;
  -epub-writing-mode: tb-rl;
}
.paging-side.right{
  right:-30px;
}
.paging-side.left{
  left:-20px;
  width:1em;
}
.sae_item{
  height:16.6%;
  position:absolute;
  top:16.6%;
}



.page_content{
  direction:rtl;height:100%;position:relative;border:1px solid #666;
  display:none;
}

.str_grp{
  position:relative;
  border-bottom:1px solid #333;
  padding:.5em 0;
  margin:0;
  margin-left:0!important;
  font-size:16px;
  /* margin-bottom:1em; */
  /* padding-bottom:1em; */
}
.str_grp:last-child{
  border-bottom:0px solid #333;
}

/* vertical-rl -> tb-rl */
.str_item{
  /* border:1px solid #f00; */
  position:absolute;
  direction:ltr;
  display:inline-block;
  padding-top:0em;
  font-weight:normal;
  writing-mode: tb-rl;
  cursor:pointer;
  height:96%;
  text-align:justify;
  text-align-last: justify;
  /*
  letter-spacing: .03em;
  -webkit-writing-mode: tb-rl;
  -moz-writing-mode: tb-rl;
  -o-writing-mode: tb-rl;
  -ms-writing-mode: tb-rl;
  -epub-writing-mode: tb-rl;
  height:100%;
  -webkit-text-size-adjust:none;
  text-justify:inter-word;
  vertical-align: middle;
  */
}
.str_item.e_Attr_1,
.str_item.e_Attr_3,
.str_item.e_Attr_4,
.str_item.e_Attr_12,
.str_item.short-str,
.str_item.page-full{
  text-align: auto;
  text-align-last: auto;
}
.str_item.short-str{
  height:auto!important;
}

.str_item.posSpace{
  padding-top:0em;
}

.str_item.link_gwan{
  padding-top:0;
  font-weight:400;
  cursor:pointer;
  height:auto;
  text-align:left;
  bottom:0;
  color:#04671a;
}

/* horizontal-tb -> lr-tb */
.str_item.str_item_head{
  /* width:1em;
  padding-top:0;
  text-align:center;
  vertical-align: middle;
  writing-mode:lr-tb;
  -webkit-writing-mode: lr-tb;
  -moz-writing-mode: lr-tb;
  -o-writing-mode: lr-tb;
  -ms-writing-mode: lr-tb;
  -epub-writing-mode: lr-tb; */
}


#page_content_1 .str_grp{
  /* padding-left:3em; */
}
span.str_item{

}
span.str_item.sign{
  color:#822882;
}
span.str_item.FontGroupNo_24{
  /* padding-top:0;
  display:inline-block;
  position:relative;
  width:1em;
  height:100%;
  text-align:center;
  margin:0 auto; */
}

/* 子, 婿 */
span.str_item.FontGroupNo_26{
}

/* 이름 : 한글 */
span.str_hangle{
  font-weight:600;
  width:1em;
}

span.str_top{
  margin-top:-1em;
}


/* 이름 : 한자 */
span.str_hanja{
  font-weight:400;
  width:1em;
}

.page-title{
  width:1em!important;
  vertical-align: middle!important;
  font-size:28px;
  position:absolute;
  z-index : 9;
  right:0;
  top:0;
  height:100%;
  background-color:#e9e4d5;
  text-align: left;
  vertical-align: middle;
  border-left:1px solid #000!important;
  padding-left:1.2em;
  padding-right:.2em;
  line-height:1em;
  writing-mode: tb-rl;
  -webkit-writing-mode: tb-rl;
  -moz-writing-mode: tb-rl;
  -o-writing-mode: tb-rl;
  -ms-writing-mode: tb-rl;
  -epub-writing-mode: tb-rl;
}

span.str_item.str_head{
  color:#f00;
}

span.str_item span.str_child{
  /* position:relative;
  display:inline-block;
  color:#f00;
  width:2em; */
}

img.side-button{
  cursor:pointer;
  position:absolute;
  z-index:9999;
  top:50%;
}
img.side-button.btn-next{left:0;}
img.side-button.btn-previous{right:0;}

div#html_popup{
  position:absolute;
  z-index:99999;
  transform-origin: left top;
  top:0;
  left:0;
  background-color:#fff;
  display:none;
}
.gnb_logo{
  background-image:url("../../../images/img_logo.png");
  background-repeat: no-repeat;
  background-position: center center;
  width:38px;
  height:38px;
}

div#html_menu_bg{
  position:absolute;
  z-index:99998;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-color:#000;
  opacity: .2;
  display:none;
}
div#html_menu{
  position:absolute;
  z-index:99999;
  transform-origin: left top;
  top:0;
  left:0;
  display:none;
}
div#html_menu > ul{
  overflow:hidden;
  border-radius: 10px;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.5);
}
div#html_menu > ul li{
  text-align: right;
  padding:.8em 1em;
  border-bottom:1px solid #666;
  background-color:#cfc3b6;
  cursor:pointer;
}
div#html_menu > ul li:hover{
  color:#fff;
  background-color:#9c8770;
}

div#html_popup_ctl{
  text-indent:-9999999999999em;
  background-image: url("../../../html5/html5_src/img/html5_icon_close.png");
  background-size:auto 100%;
  background-repeat:no-repeat;
  background-position:center right 1em;
  height:3em;
  margin:1em 1em;
  cursor:pointer;
}
.link_gwan{
  /* bottom:0;
  color:#04671a; */
}



.page-title{
  display:block;
  width:1em;
}
.page-title.top{
  margin-bottom:1em;
}

.e_Attr_10{
  background-image: url("../../../images/bgpattern10_2.jpg");
  background-repeat: repeat;
  padding:.3em;
  z-index : 9;
}



@media only print {
}