@font-face{
	font-family:'Nanum Gothic';
	src: url("../font/NanumGothic.ttf") format('truetype');
	src: url("../font/NanumGothic.otf");
	src: url("../font/NanumGothic.eot");
	/* src: url("/res/font/NanumGothic.woff"); */
}

@font-face {
	font-family:"TS_mobile";
	src:  local("TS_mobile"),
				/* url("../../../appendix/html5_font/TS-Mobile.woff2?version=2") format('font-woff2'),
				url("../../../appendix/html5_font/TS-Mobile.woff?v=2") format('woff'); */
				url("../../../html5/html5_font/TS-Mobile.woff2?version=2") format('font-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-image:url("../../../../images/icon/blue-bg.png");
	background-repeat:repeat;
	background-size: cover;
}
body.print{
	background:none;
}

nav.gnb{
	display:flex;
	align-items: center;
	text-align: center;
	justify-content: space-between;
	width:1920px;
	min-width:100%;
	font-size:12px;
	background-color:#a0dbf7;
	height:90px;
	font-family: 'Nanum Gothic', sans-serif;
	position:absolute;
	z-index:999;
	top:0;
	transform-origin: top left;
	/* transition: 0.4s all ease; */
}
nav.gnb.off{}
nav.gnb > ul{
	/* display:table; */
	width:auto;
	height:90px;
	list-style: none;
	list-style-position: inside;
	margin:0 auto;
}
nav.gnb > ul > li{
	/* display:table-cell;
	vertical-align: bottom; */
	float:left;
	display: flex;
	background-repeat:no-repeat;
	background-position:top 20px center ;
	text-align: center;
	font-size:14px;
	font-weight:700;
	color:#0f4761;
	padding-bottom:10px;
	cursor: pointer;
	width: 80px;
	height:100%;
}
nav.gnb ul > li:not(.gnb-move):not(.gnb-slider):hover{
	background-color:#00a5f0;color:#fff;
}
nav.gnb ul > li.gnb-move,
nav.gnb ul > li.gnb-slider{
	width:auto;
	padding:0 1em;
}

nav.gnb ul > li.gnb-home{background-image:url("../../../images/icon/home-icon.png");}
nav.gnb ul > li.gnb-cate{background-image:url("../../../images/icon/cate-icon.png");}
nav.gnb ul > li.gnb-both{background-image:url("../../../images/icon/both-icon.png");}
nav.gnb ul > li.gnb-first{background-image:url("../../../images/icon/first-icon.png");}
nav.gnb ul > li.gnb-prev{background-image:url("../../../images/icon/prev-icon.png");}
nav.gnb ul > li.gnb-next{background-image:url("../../../images/icon/next-icon.png");}
nav.gnb ul > li.gnb-last{background-image:url("../../../images/icon/last-icon.png");}
nav.gnb ul > li.gnb-zoomin{background-image:url("../../../images/icon/zoomIn-icon.png");}
nav.gnb ul > li.gnb-zoomout{background-image:url("../../../images/icon/zoomOut-icon.png");}
nav.gnb ul > li.gnb-vertical{background-image:url("../../../images/icon/vertical-icon.png");background-position:top 15px center ;}
nav.gnb ul > li.gnb-print{background-image:url("../../../images/icon/print-icon.png");}
nav.gnb ul > li.gnb-help{background-image:url("../../../images/icon/help-icon.png");}
nav.gnb ul > li.gnb-search{background-image:url("../../../images/icon/search-icon.png");}

nav.gnb ul > li.gnb-home:hover{background-image:url("../../../images/icon/home-icon_h.png");}
nav.gnb ul > li.gnb-cate:hover{background-image:url("../../../images/icon/cate-icon_h.png");}
nav.gnb ul > li.gnb-both:hover{background-image:url("../../../images/icon/both-icon_h.png");}
nav.gnb ul > li.gnb-first:hover{background-image:url("../../../images/icon/first-icon_h.png");}
nav.gnb ul > li.gnb-prev:hover{background-image:url("../../../images/icon/prev-icon_h.png");}
nav.gnb ul > li.gnb-next:hover{background-image:url("../../../images/icon/next-icon_h.png");}
nav.gnb ul > li.gnb-last:hover{background-image:url("../../../images/icon/last-icon_h.png");}
nav.gnb ul > li.gnb-zoomin:hover{background-image:url("../../../images/icon/zoomIn-icon_h.png");}
nav.gnb ul > li.gnb-zoomout:hover{background-image:url("../../../images/icon/zoomOut-icon_h.png");}
nav.gnb ul > li.gnb-vertical:hover{background-image:url("../../../images/icon/vertical-icon_h.png");}
nav.gnb ul > li.gnb-print:hover{background-image:url("../../../images/icon/print-icon_h.png");}
nav.gnb ul > li.gnb-help:hover{background-image:url("../../../images/icon/help-icon_h.png");}
nav.gnb ul > li.gnb-search:hover{background-image:url("../../../images/icon/search-icon_h.png");}

nav.gnb > ul > li > span{
	display:block;
	width:100%;
	text-align: center;
	align-self: flex-end;
}

body.mobile nav.gnb{
	height:180px;
	font-size:24px;
}
body.mobile nav.gnb  ul{
	height:180px;
}
body.mobile nav.gnb  ul > li{
	width: 160px;
	font-size:30px;
	background-size:50%;
}
body.mobile nav.gnb ul > li.gnb-move,
body.mobile nav.gnb ul > li.gnb-slider{
	width:auto;
	padding:0 1em;
}

/* 목록 */
#item_index{
  position:absolute;
  top:90px;
	width:300px;
  background-color:#a0dbf7;
  border-radius:0 0 1em 1em;
  box-shadow: 0px 12px 2px 1px rgba(0, 0, 0, .2);
	display:none;
}

body.mobile #item_index{
  top:180px;
	width:600px;
}

body.mobile #item_index > ul{
	height:auto;
}
body.mobile #item_index > ul > li{
	width:100%;
}



ul.item_index_group{
  list-style: decimal;
	list-style-position: inside;
  padding:0;
  margin:0;
}
ul.item_index_group  li.index_title{
  padding:.5em 1em;
  background-color:#a9852c;
  color:#fff;
  font-weight: bold;
}
ul.item_index_group  li.index_item{
  padding:.5em 1em;
  cursor:pointer;
  line-height: 1.75;
  background-repeat: no-repeat;
  background-position:center left .5em;
  font-weight: bold;
	font-size:16px;
	text-align: left;
}
ul.item_index_group  li.index_item:hover{
  font-weight:bold;
  background-color:rgba(0, 0, 0, .2);
}
ul.item_index_group > li.index_item.depth_1{
  /* background-image:url("../../../images/append_index_point.gif"); */
}
ul.item_index_group > li.index_item.depth_2{
  padding-left:3.5em;
}
/* 목록 끝; */

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;
}

body.mobile div#html_menu{
	width:140px;
	transform: scale(0.9)!important;
}

.con-gnb-move{
	display:flex;
	align-items: center;
	justify-content: center;
	margin-top:20px;
}
nav.gnb ul > li.gnb-move{padding-bottom:20px;width:350px;}
nav.gnb ul > li.gnb-move > .con-gnb-move > label{
	display:table;
	border-collapse: collapse;
}
nav.gnb ul > li.gnb-move > .con-gnb-move > label:first-child{
	margin-right:20px;
}
nav.gnb ul > li.gnb-move > .con-gnb-move > label > input,
nav.gnb ul > li.gnb-move > .con-gnb-move > label > span,
nav.gnb ul > li.gnb-move > .con-gnb-move > label > button{
	display:table-cell;
	border:0;
}

nav.gnb ul > li.gnb-move > .con-gnb-move > label > input,
nav.gnb ul > li.gnb-move > .con-gnb-move > label > button{
	height:50px;
	font-size:26px;
	text-align: center;
	border-radius: 8px;
}

nav.gnb ul > li.gnb-move > .con-gnb-move > label > input[name="go_gwan"]{width:70px;margin-right:10px;}
nav.gnb ul > li.gnb-move > .con-gnb-move > label > input[name="go_page"]{
	width:115px;
	border-radius: 8px 0 0 8px;
}
nav.gnb ul > li.gnb-move > .con-gnb-move > label > button#btn-go{
	background: #00a5f0;
	font-size: 26px;
	color: #fff;
	width: 85px;
	height: 50px;
	border: 0;
	border-radius: 0 8px 8px 0;
	cursor:pointer;
}


body.mobile nav.gnb ul > li.gnb-move > .con-gnb-move > label > input,
body.mobile nav.gnb ul > li.gnb-move > .con-gnb-move > label > button{
	height:100px;
	font-size:32px;
	text-align: center;
	border-radius: 8px;
}

body.mobile nav.gnb ul > li.gnb-move > .con-gnb-move > label > input[name="go_gwan"]{width:70px;margin-right:10px;}
body.mobile nav.gnb ul > li.gnb-move > .con-gnb-move > label > input[name="go_page"]{
	width:115px;
	border-radius: 8px 0 0 8px;
}
body.mobile nav.gnb ul > li.gnb-move > .con-gnb-move > label > button#btn-go{
	background: #00a5f0;
	font-size: 40px;
	color: #fff;
	width: 170px;
	height: 100px;
	border: 0;
	border-radius: 0 8px 8px 0;
	cursor:pointer;
}
body.mobile .con-gnb-move{
	margin-top:0;
}
body.mobile nav.gnb > ul > li > span{
	margin-bottom:0.5em;
}


nav.gnb ul > li.gnb-slider .con-slider{
	width: 100%;
}
#go-Range{
  -webkit-appearance: none;
  margin-right: 15px;
	margin-top:35px;
  width: 400px;
  height: 7px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  background-image: linear-gradient(#00a5f0, #00a5f0);
  background-size: 0% 100%;
  background-repeat: no-repeat;
}

#go-Range::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #00a5f0;
  cursor: ew-resize;
  box-shadow: 0 0 2px 0 #555;
  transition: background .3s ease-in-out;
}

#go-Range::-webkit-slider-runnable-track  {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}


.btn-openGnb{
	cursor:pointer;
	position: absolute;
	bottom:-40px;
	left:0;
	right:0;
	margin:0 auto;
	width:100px;height:40px;
	border:0;
	border-radius: 0 0 15px 15px;
	background: url("../../../images/icon/dash-up.png")center center #00a5f0 no-repeat;
}
nav.gnb.off .btn-openGnb{
	background: url("../../../images/icon/dash-down.png")center center #00a5f0 no-repeat;
}

body.mobile .btn-openGnb{
	width:200px;height:80px;
	bottom:-80px;
}
body.mobile nav.gnb.off .btn-openGnb{
	background: url("../../../images/icon/dash-down.png")center center #00a5f0 no-repeat;
}



div.contents{
	font-family: 'TS_mobile';
}
.html_pg_contents{
	font-family: 'TS_mobile';
}


.ctlBtn{
	position:fixed;
	z-index:99;
	top:calc(50% - 80px);
	cursor:pointer;
}
.ctlBtn.left{left:0;}
.ctlBtn.right{right:0;}

#de-contents{
	z-index:99;
}
#de-contents .page{
	background-image:url("../../../images/bgpattern10_2.jpg");
	background-size:auto;
	background-repeat: repeat;
	direction: rtl;

}
.page.odd{}
.page.even{}


.html_page{}
.html_page_inner{
	width:calc(1620px/2);
	height:1080px;
	transform: scale(1);
  transform-origin: top left;
	position:absolute;
	top:0;
	left:0;
	padding:20px 50px;

}



.html_pg_num{margin-bottom:2px;}
.page.odd .html_pg_num{text-align: left;;}
.html_pg_body{
	border:2px solid #000;
	height:1000px;
	padding:5px;
}

.html_pg_contents{
	border:1px solid #000;
	width:100%;
	height:100%;
	position:relative;
	/* font-size:16px; */
}

.html_pg_contents .de-dan{
	position:relative;
	border-bottom:1px solid #000;
	height:164px;
	font-size:15.5px;
}

.item-string{
	position:absolute;
	top:3px;
	right:0;
	writing-mode: tb-rl;
	/* text-align-last: justify; */
	/* text-align: justify; */
	cursor:pointer;

}
.item-string.normal{
	display:flex;
	justify-content: space-around;
	direction: ltr;
}
.item-string.active{
	color:#4f81b5;
	font-weight:400;
}
.item-string i{
	text-indent: -9999px;
}
.item-string.normal span{
}
.item-string span{}

.link-gwan,
.link-page{
	direction: ltr;
}



.item-direction-0{
	writing-mode: rl-tb;
	margin-top:-15px;
}


/*
.item-fontgroup-4,
.item-fontgroup-11{
	font-size:1.5em!important;
	height:100%!important;
	text-align-last:center;
}


.item-fontgroup-1,
.item-fontgroup-10{
	padding-top:1.3em!important;
	font-size:12px!important;
}


.title-bar,
.item-fontgroup-12,
.item-fontgroup-19{
	height: 983px!important;
	margin-right:0!important;
	top:0!important;
	border:0px solid #000;
	border-left:1px solid #000;
	background-color:#e9e4d5;
	padding:20px 5px;
	z-index:2;
	right:0!important;
	text-align-last:end;
	font-size:25px!important;
}

.item-fontgroup-2,
.item-fontgroup-16,
.item-fontgroup-29{
	margin-right:0!important;
}



.item-fontgroup-5,
.item-fontgroup-23,
.item-fontgroup-24,
.item-fontgroup-25,
.item-fontgroup-28{
	font-size:22px!important;
}

.item-string.item-fontgroup-7.active,
.item-string.item-fontgroup-7{
	top: auto!important;
	bottom:0;
	color:#04671a;
	cursor:pointer;
}
*/

/* .title-bar{
	height: 983px!important;
	margin-right:0!important;
	top:0!important;
	border:0px solid #000;
	border-left:1px solid #000;
	background-color:#e9e4d5;
	padding:20px 5px;
	z-index:2;
	right:0!important;
	text-align-last:end;
	font-size:25px!important;
} */

.item-attr-11.title-bar{
	height: 983px!important;
	top:0!important;
	border:0px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;
	background-color:#e9e4d5;
	padding:20px 5px;
	z-index:2;
	text-align-last:end;
	font-size:25px!important;
	margin-right : -7px!important;
}


.item-attr-12{
	font-size:1.2em!important;
	height:100%!important;
	text-align-last:center;
}
.item-fontgroup-2.item-attr-12{
	height:300px!important;
}

.item-attr-2{
	padding-top:0.5em!important;
}

.item-attr-4{
	margin-right:-0.2em!important;
}

.item-attr-5,
.item-attr-6{
	top: auto!important;
	bottom:0;
	color:#04671a;
	cursor:pointer;
	margin-right: 0.5em;
}
.item-attr-6{
	margin-right: -0.5em;
}


.item-attr-25{
	position:fixed;
	top:2px;

}

canvas{
	position:absolute;
	top:0;
	left:0;
	border:1px solid #f00;
}

iframe#iframe-print{
	display:none;
	width:1920px;
	height:1080px;
	border:1px solid #f00;
}



/* @media print {
	html, body {
			width: 210mm;
			height: 297mm;
			background: #fff;
	}
	.paper {
			margin: 0;
			border: initial;
			border-radius: initial;
			width: initial;
			min-height: initial;
			box-shadow: initial;
			background: initial;
			page-break-after: always;
	}
} */

.page-sae{
	position:absolute;
	width:1em;
	right : -40px;
	font-size:20px;
	writing-mode : tb-rl;
	text-align: center;
}
.page-title{
	position:absolute;
	left:-45px;
	width:1em;
	font-size:22px;
	height:980px;
	writing-mode : tb-rl;
	text-align: center;
}