html,
body {
	height: 100%;
	overflow: hidden;
}
#wrap {
	background-color: #666;
	width: 100% !important;
	height: 100% !important;
}

/* #warp-all{width:1010px;height:660px;position:relative;z-index:1000;display: inline;-moz-transform-origin:top left;-webkit-transform-origin:top left;-ms-transform-origin:top left; transform-origin:top left; background: rgba(255,255,255,.0);} */

/* #fs-container{width:1280px;height:720px;position:absolute;top:40%;margin-top:-300px;left:50%;margin-left:-450px;} */
#fs-container {
	width: 1280px;
	height: 760px;
	position: absolute;
	top: 0%;
	margin-top: 0px;
	left: 0%;
	margin-left: 0px;
	-moz-transform-origin: top left;
	-webkit-transform-origin: top left;
	-ms-transform-origin: top left;
	transform-origin: top left;
}
.container_inner {
	width: 1280px;
	height: 760px;
	position: relative;
	overflow: hidden;
}



/**      상단 헤더      **/

#fs-header {
	width: 1280px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 720;
}
#fs-header .content_close {
	display: none;
	position: absolute;
	right: 4px;
	top: 2px;
	z-index: 1;
	cursor: pointer;
}
#fs-header .top-logo1 {
	position: absolute;
	left: 10px;
	top: 0px;
}
#fs-header .top-logo2 {
	position: absolute;
	display: none;
	left: 0px;
	top: 42px;
}
#fs-header .top-logo3 {
	/* display: none; */
	position: absolute;
	right: 0px;
	top: 0px;
}

#profileMap {
	display: none;
	z-index: 999;
	position: absolute;
	left: 0;
	top: 0;
	width: 1000px;
	height: 650px;
	background-color: rgba(0, 0, 0, 0.8);
}
#profileData {
	position: absolute;
	width: 484px;
	height: 538px;
	left: 252px;
	top: 91px;
	background: url(../css/img/profile.png) no-repeat;
}
#profileClose {
	position: absolute;
	width: 35px;
	height: 35px;
	right: 215px;
	top: 105px;
	cursor: pointer;
	background: url(../css/img/map/close_btn_o.png);
}
#profileClose:hover {
	background: url(../css/img/map/close_btn_o_over.png);
}
/* .footer_inner .paging {
		right: 457px;
		top: 10px;
	
	}
	.footer_inner .paging li {
		font-size: 24px !important;
	} */
.profile {
	display: none;
	cursor: pointer;
	position: absolute;
	padding: 5px 20px;
	border-radius: 20px;
	font-weight: bold;
	left: 450px;
	background-color: #fff;
	top: -30px;
	border: 2px solid #000;
}
.header_right {
	font-weight: 500;
	text-shadow: 3px 3px 2px #25595c;
	line-height: 45px;
	font-size: 15pt;
	position: absolute;
	right: 0px;
	top: 0px;
	color: #fff;
}

/**	index		**/

/* 인덱스2 */
#fs-index {
	font-size: 16px;
	display: none;
	position: absolute;
	background-color: rgba(28, 28, 28, 0.9);
	top: 0;
	min-width: 400px;
	padding: 0px;
	border-radius: 10px;
	overflow: hidden;
	z-index: 1000;
	height: 585px;
}
#fs-index span,
#fs-index p {
	display: block;
	max-width: 600px;
	color: #fff;
	cursor: pointer;
}
#fs-index > p::before {
	content: ' - ';
}
#fs-index > span::before {
	content: ' - ';
}
#fs-index p {
	padding: 4px 20px 4px 20px;
}
#fs-index span {
	padding: 6px 20px 6px 50px;
}
/* #fs-index p + span{margin-top: -10px;} */
.ui-bookmark-active {
	background-color: rgba(255, 255, 255, .1);
	color: rgba(185, 179, 210, 1) !important;
}
#fs-index p:hover,
#fs-index span:hover {
	background-color: rgba(255, 255, 255, .1);
	color: rgba(185, 179, 210, 1);
}

#fs-index h2 {
	/* display: none; */
	padding: 7px 7px;
	color: rgba(185, 179, 210, 1);
	border-bottom: 3px solid rgba(255, 255, 255, .9);
	margin-bottom: 10px;
	font-size: 24px;
	font-weight: bold;
}

#learningMap {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 1000px;
	height: 647px;
	background: url(../../common/css/img/learningmap/back.png) no-repeat center;
	z-index: 999;
}
#ecoMap {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 1000px;
	height: 647px;
	background: url(../../common/css/img/gudie/back.png) no-repeat center;
	background-position-y: 32px;
	z-index: 999;
}
#ecoMap .pagebtn1 {
	z-index: 1;
	position: absolute;
	display: inline-block;
	width: 143px;
	height: 25px;
	top: 110px;
	left: 345px;
	cursor: pointer;
	background: url(../../common/css/img/gudie/btn1_non.png) no-repeat center;
}
#ecoMap .pagebtn1:hover,
#ecoMap .pagebtn1.active {
	background: url(../../common/css/img/gudie/btn1_over.png) no-repeat center;
}
#ecoMap .pagebtn2 {
	z-index: 1;
	position: absolute;
	display: inline-block;
	width: 143px;
	height: 25px;
	top: 110px;
	left: 495px;
	cursor: pointer;
	background: url(../../common/css/img/gudie/btn2_non.png) no-repeat center;
}
#ecoMap .pagebtn2:hover,
#ecoMap .pagebtn2.active {
	background: url(../../common/css/img/gudie/btn2_over.png) no-repeat center;
}
#ecoMap .pagebtn3 {
	z-index: 1;
	position: absolute;
	display: inline-block;
	width: 143px;
	height: 25px;
	top: 110px;
	left: 645px;
	cursor: pointer;
	background: url(../../common/css/img/gudie/btn3_non.png) no-repeat center;
}
#ecoMap .pagebtn3:hover,
#ecoMap .pagebtn3.active {
	background: url(../../common/css/img/gudie/btn3_over.png) no-repeat center;
}

#ecoMap .pagebtn4 {
	z-index: 1;
	position: absolute;
	display: inline-block;
	width: 143px;
	height: 25px;
	top: 110px;
	left: 795px;
	cursor: pointer;
	background: url(../../common/css/img/gudie/btn4_non.png) no-repeat center;
}
#ecoMap .pagebtn4:hover,
#ecoMap .pagebtn4.active {
	background: url(../../common/css/img/gudie/btn4_over.png) no-repeat center;
}

.econext {
	cursor: pointer;
	display: none;
	position: absolute;
	width: 55px;
	height: 56px;
	left: 817px;
	top: 365px;
	background: url(../../common/css/img/gudie/next0001.png);
}
.ecoprev {
	cursor: pointer;
	display: none;
	position: absolute;
	width: 55px;
	height: 56px;
	left: 275px;
	top: 365px;
	background: url(../../common/css/img/gudie/prev0001.png);
}
.econext:hover {
	background: url(../../common/css/img/gudie/next0002.png);
}
.ecoprev:hover {
	background: url(../../common/css/img/gudie/prev0002.png);
}
.bbb1 {
	cursor: pointer;
	position: absolute;
	width: 142px;
	height: 26px;
	left: 129px;
	top: 260px;
	background: url(../../common/css/img/gudie/left1_d.png);
}
.bbb2 {
	cursor: pointer;
	position: absolute;
	width: 142px;
	height: 26px;
	left: 129px;
	top: 322px;
	background: url(../../common/css/img/gudie/left2_d.png);
}
.bbb3 {
	cursor: pointer;
	position: absolute;
	width: 142px;
	height: 26px;
	left: 129px;
	top: 388px;
	background: url(../../common/css/img/gudie/left3_d.png);
}
.bbb4 {
	cursor: pointer;
	position: absolute;
	width: 142px;
	height: 26px;
	left: 129px;
	top: 456px;
	background: url(../../common/css/img/gudie/left4_d.png);
}

.bbb1.active {
	background: url(../../common/css/img/gudie/left1_f.png);
}
.bbb2.active {
	background: url(../../common/css/img/gudie/left2_f.png);
}
.bbb3.active {
	background: url(../../common/css/img/gudie/left3_f.png);
}
.bbb4.active {
	background: url(../../common/css/img/gudie/left4_f.png);
}

.bbb1:not(.active):hover {
	background: url(../../common/css/img/gudie/left1_o.png);
}
.bbb2:not(.active):hover {
	background: url(../../common/css/img/gudie/left2_o.png);
}
.bbb3:not(.active):hover {
	background: url(../../common/css/img/gudie/left3_o.png);
}
.bbb4:not(.active):hover {
	background: url(../../common/css/img/gudie/left4_o.png);
}

#ecoMap .ecoPage {
	position: absolute;
	display: none;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
#ecoMap .cImg {
	position: absolute;
	left: 130px;
	top: 205px;
}
#ecoMap .ecoPage1 .dImg {
	position: absolute;
	left: 84px;
	top: 176px;
}
#ecoMap .ecoPage2 .dImg {
	position: absolute;
	left: 84px;
	top: 176px;
}
#ecoMap .ecoPage3 .dImg {
	position: absolute;
	left: 84px;
	top: 176px;
}
#ecoMap .ecoPage4 .dImg {
	position: absolute;
	left: 84px;
	top: 176px;
}

#learningClose {
	position: absolute;
	right: 31px;
	top: 61px;
	width: 40px;
	height: 40px;
	cursor: pointer;
}
#ecoClose {
	z-index: 999;
	position: absolute;
	right: 40px;
	top: 55px;
	width: 30px;
	height: 30px;
	cursor: pointer;
}
.ecoPrevBtn {
	cursor: pointer;
	display: none;
	position: absolute;
	top: 600px;
	left: 435px;
}
.ecoNextBtn {
	cursor: pointer;
	position: absolute;
	top: 600px;
	left: 550px;
}
#ecopageInfo {
	position: absolute;
	width: 100%;
	top: 600px;
	left: 0;
	text-align: center;
	font-weight: bold;
	font-size: 20px;
}

#learningBtns {
	display: none;
	position: absolute;
	width: 71px;
	height: 140px;
	right: 15px;
	top: 53px;
	z-index: 2;
	/* background: url(../../common/css/img/learningmap/btns.png); */
}
#learningBtn1 {
	cursor: pointer;
	position: absolute;
	width: 99px;
	height: 22px;
	top: 0;
	left: -85px;
	background: url(../../common/css/img/learning_btn.png);
}
#learningBtn2 {
	cursor: pointer;
	position: absolute;
	width: 63px;
	height: 22px;
	top: 0;
	left: 22px;
	background: url(../../common/css/img/gudie_btn.png);
}
#learningBtn1:hover {
	background: url(../../common/css/img/learning_btn_over.png);
}
#learningBtn2:hover {
	background: url(../../common/css/img/gudie_btn_over.png);
}
#learningImg {
	position: absolute;
	left: 80px;
	top: 142px;
}
#ecoImg {
	position: absolute;
	left: 71px;
	top: 40px;
}

#pageContent {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
}

/**	내용 컨텐츠		**/
#fs-content {
	width: 1280px;
	height: 720px;
	display: block;
	box-sizing: border-box;
}
.content_inner {
	width: 100%;
	height: 720px;
	z-index: 7;
	position: relative;
}
#htmlShow {
	display: none;
}
#mediaObj {
	width: 100%;
	height: 720px;
	text-align: center;
	position: absolute;
	left: 0;
	top: 0px;
}
#mediaObj video {
	width: 1280px;
	height: 720px;
}

/** 날개 페이징 **/
#fs-content .big_arr_left {
	width: 55px;
	height: 100px;
	position: absolute;
	left: -60px;
	top: 50%;
	margin-top: -50px;
	background: url("./img/big_arr_left.png") no-repeat;
	display: block;
	cursor: pointer;
	z-index: 100;
	display: none;
}
#fs-content .big_arr_right {
	width: 55px;
	height: 100px;
	position: absolute;
	right: -60px;
	top: 50%;
	margin-top: -50px;
	background: url("./img/big_arr_right.png") no-repeat;
	display: block;
	cursor: pointer;
	z-index: 100;
	display: none;
}

/* 깜박이는 버튼 */
.blink {
	animation-name: blink;
	animation-delay: 0.5s;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}
.blink:hover {
	animation-play-state: paused;
}
@keyframes blink {
	from {
		opacity: 1;
	}
	to {
		opacity: 0.5;
	}
}

* {
	letter-spacing: -1px;
}

.popup_guide {
	width: 100%;
	height: 100%;
	background: url(../css/img/popup/guide.png) no-repeat;
	background-position-y: 75px;
	top: 0;
	position: absolute;
	z-index: 2;
	display: none;
}

.popup_guide_x {
	position: absolute;
	top: 89px;
	right: 30px;
	width: 23px;
	height: 21px;
	background: url(../css/img/popup/close.png);
	cursor: pointer;
}

.popup_leaning {
	width: 100%;
	height: 100%;
	/* background: url(../css/img/popup/l1.png) no-repeat; */
	background-repeat: no-repeat;
	background-position-y: 75px;
	top: 0;
	position: absolute;
	z-index: 2;
	display: none;
}

.popup_leaning_x {
	position: absolute;
	top: 89px;
	right: 30px;
	width: 23px;
	height: 21px;
	background: url(../css/img/popup/close.png);
	cursor: pointer;
}

#gogoBox {
	position: absolute;
	width: 550px;
	height: 300px;
	background: url(../css/img/gogo/exp.png);
	background-repeat: no-repeat;
	left: 370px;
	top: 300px;
}
#gogoBox .gogoOxBox {
	position: relative;
	position: relative;
	left: 449px;
	top: 20px;
	height: 48px;
}
#gogoBox .gogoOxBox .gogoO {
	cursor: pointer;
	display: inline-block;
	width: 46px;
	height: 49px;
	opacity: 0.3;
	background: url(../css/img/gogo/o.png);
}
#gogoBox .gogoOxBox .gogoX {
	cursor: pointer;
	display: inline-block;
	width: 45px;
	height: 49px;
	opacity: 0.3;
	background: url(../css/img/gogo/x.png);
}

#gogoBox .gogoCheckBtn {
	cursor: pointer;
	position: absolute;
	display: inline-block;
	width: 132px;
	height: 37px;
	background: url(../css/img/gogo/check.png);
	left: 210px;
	top: 280px;
}
#gogoBox .gogoCheckBtn:hover {
	background: url(../css/img/gogo/check_over.png);
}

#gogoBox .alertPopup {
	position: absolute;
	display: none;
	width: 224px;
	height: 71px;
	left: 150px;
	top: 80px;
	background: url(../css/img/gogo/alert.png);
}

#gogoBox .gogoCloseBtn {
	cursor: pointer;
	position: absolute;
	display: inline-block;
	left: 375px;
	top: 25px;
	width: 80px;
	height: 43px;
	background: url(../css/img/gogo/close.png);
}
.gogoPopup1 {
	position: absolute;
	left: 18px;
	top: -90px;
	display: none;
	width: 550px;
	height: 397px;
	background: url(../css/img/gogo/pop1.png);
}
.gogoPopup2 {
	position: absolute;
	left: 18px;
	top: -90px;
	display: none;
	width: 550px;
	height: 397px;
	background: url(../css/img/gogo/pop2.png);
}
.gogoPopup3 {
	position: absolute;
	left: 18px;
	top: -90px;
	display: none;
	width: 550px;
	height: 397px;
	background: url(../css/img/gogo/pop3.png);
}
.gogoPopup4 {
	position: absolute;
	left: 18px;
	top: -90px;
	display: none;
	width: 550px;
	height: 397px;
	background: url(../css/img/gogo/pop4.png);
}
#gogoBox .gogoCloseBtn:hover {
	background: url(../css/img/gogo/close_over.png);
}

.gogoPopupBg {
	position: absolute;
	width: 779px;
	height: 581px;
	background: url(../css/img/gogo/popupback.png);
	left: -139px;
	top: -201px;
	display: none;
}

.popup_key {
	width: 100%;
	height: 100%;
	background: url(../css/img/popup/key.png) no-repeat;
	background-position-y: 75px;
	top: 0;
	position: absolute;
	z-index: 2;
	display: none;
}

.popup_key_x {
	position: absolute;
	top: 118px;
	right: 30px;
	width: 23px;
	height: 21px;
	background: url(../css/img/popup/close.png);
	cursor: pointer;
}