* { box-sizing: border-box; padding: 0; margin: 0; }
li { list-style: none; }
button { border: 0; cursor: pointer; }
a { text-decoration: none; color: #333; }
html, body { height: 100%; }
body { color: #333; font-family: 'Nanum Square'; line-height: 1.5; font-size: 15px; }
.nsr_l { font-family: 'Nanum Square'; font-weight: 300; }
.nsr_r { font-family: 'Nanum Square'; font-weight: 400; }
.nsr_b { font-family: 'Nanum Square'; font-weight: 700; }
.nsr_eb { font-family: 'Nanum Square'; font-weight: 800; }
.skip { position: fixed; top: -10000px; left: -10000px; font-size: 0; }
body.mainActive #intro { display: block; }
#intro {display:none; position:fixed; left:0; top:0;z-index:999; width:100%; height:100%; background:url(/cyber/star/img/intro_bg.jpg)no-repeat center; background-size:cover;}
#intro .progress {opacity:0;}
#intro button {display:block; width:100%; height:100%;background:transparent;}
#intro p {font-size: 20px;font-weight:bold;color:#c9c9c9;}
#intro .btnbox {display:block;margin:50px auto 0;width: 300px;height: 70px;line-height: 70px;padding-left: 60px;border-radius: 50px;background: #ffd143 url(/cyber/star/img/btn_arr.png)no-repeat 80% center;font-size: 25px;font-weight: bold;color: #002a47;text-align: left;}

@media(max-width:1199px){
	#intro  img {width:700px}
	#intro .btnbox {width: 210px;height: 60px;line-height: 60px;padding-left:40px;background-position: 80% center;background-size:10px auto;font-size: 22px;}
}

@media(max-width:1023px){
	#intro {padding:0 10%;}
	#intro img {width: 100%;max-width:600px;}
	#intro p {font-size:16px;}
	#intro .btnbox {width:150px;height:50px;line-height:50px;margin: 20px auto 0;font-size:16px;background-size:7px auto;}

}
@media(max-width:767px){
	#intro {padding:0 20px;}
}


.progress { position: absolute; left: 0; right: 0; top: 0; }
.progressValue {display: block;background-color: #3b7815;width: 0%;height: 3px;}
#wrap { position: relative; width: 100%; height: 100%; overflow: hidden; }
#header {position: absolute;left: 0;right: 0;z-index: 4;height: 80px;overflow: hidden;background: #fff;transition: 0.5s;width: 100%;}

.hd {/* height: 80px; */border-bottom: 1px solid #f5f5f5;background: #fff;/* position: relative; *//* padding: 0 0 0 310px; */width: 100%;/* box-sizing: border-box; */}
.hd_top { display: none; }
#gnb {display: block;position: absolute;top: 0;width: 100%;padding: 0 80px 0 338px;}
#logo {position: absolute;top: 14px;left: 30px;z-index: 2;}
#logo a { display: block; }
.dept1_ul {display:inline-block;width: 100%;text-align: center;}
.dept1_ul:after { content: ''; display: block; clear: both; }
.dept1_li {display: inline-block;/* float: left; */position: relative;}
.dept1_a {position: relative;display: block;width: 100%;height: 80px;padding: 0 10px;}
.dept1_a span {display: block;height: 100%;line-height: 80px;font-weight: 600;font-size: 15px;}
.dept1_a:hover span,
.dept1_a:focus span {color:#355eb2;}

/*
#header:hover {height: 400px;}
#header:focus {height: 400px;}
#header:hover .dept1_li .dept2_li { width: auto; opacity: 1; }
#header .dept1_li:nth-child(1) .dept1_a { transition: 0.5s; }
#header .dept1_li:nth-child(1) .dept3_li {width: 155px;}
#header:hover .dept1_li:nth-child(1) .dept1_a { padding-right: 200px; }
#header .dept1_li:nth-child(1) .dept2_li { float: left; }
#header .dept1_li:nth-child(1) .dept2_li + .dept2_li { margin-left: 30px; }
.dept1_a { position: relative; display: block; width: 100%; height: 80px; padding: 0 30px; }
.dept1_a span { display: block; height: 100%; line-height: 80px; font-size: 20px; }
.dept1_a:after { position: absolute; display: block; content: ''; left: 0; bottom: 0; height: 5px; width: 0; background: #3e67bb; }
.dept1_a:hover:after { width: 100%; transition: 0.5s; }
.dept2_ul {height: 300px;position: relative;padding: 30px 0 30px 30px;}
.dept2_ul:after { content: ''; display: block; clear: both; }
.dept2_a { position: relative; font-size: 18px; display: block; }
.dept2_a:after { content: ''; display: block; position: absolute; bottom: 5px; left: 0; height: 1px; width: 0; background: #3e67bb; }
.dept2_a:hover { display: block; color: #3e67bb; }
.dept2_a:hover:after { width: 100%; }
.dept2_a span { line-height: 45px; height: 45px; padding-right: 20px; }
.dept2_a:hover span { background: url(../img/blet.png) no-repeat left center; padding-left: 20px; padding-right: 0; }
.dept2_a.box { width: 45px; height: 45px; background: #3e67bb; color: #fff; text-align: center; }
.dept2_a.box span { padding: 0; }
.dept2_a.box:hover span { background: none; padding: 0; }
.dept3_a { position: relative; font-size: 18px; width: 100%; }
.dept3_a:after { content: ''; display: block; position: absolute; bottom: 5px; left: 0; height: 1px; width: 0; background: #3e67bb; }
.dept3_a:hover { display: block; color: #3e67bb; }
.dept3_a:hover:after { width: 100%; }
.dept3_a span { line-height: 45px; padding-right: 20px; }
.dept3_a:hover span { background: url(../img/blet.png) no-repeat left center; padding-left: 20px; padding-right: 0; }
*/
.headerSide { position: absolute; right: 0; top: 0; height: 80px; z-index: 4; overflow: hidden; }
.headerSide .pathWrap { float: left; margin-right: -308px; transition: 0.5s; }
.headerSide .path {height: 100%;padding: 0 20px;float: left;background-color: #2a4b8f;position:relative;}

@keyframes bg_circle{
	0%{transform: rotate(0);-webkit-transform: rotate(0);}
	100%{transform: rotate(360deg);-webkit-transform: rotate(360deg);}
}
@-webkit-keyframes bg_circle{
	0%{transform: rotate(0);-webkit-transform: rotate(0);}
	100%{transform: rotate(360deg);-webkit-transform: rotate(360deg);}
}

.headerSide .path a {display: block;width: 100%;position: relative;color: #fff;}
.headerSide .path a span {display: block;height: 80px;opacity: 0;line-height: 80px;padding: 0 5px;transition: 0.5s;transition-delay: 0.25s;}
.headerSide .path a:first-child span {}
.headerSide .path a + a:before { position: absolute; top: 50%; margin-top: -5px; left: -5px; width: 10px; height: 10px; content: ''; display: block; background: url(../img/arrow.png) no-repeat center; }
.headerSide .miniMapOpen { float: left; height: 80px; width: 80px; background: #3e67bb url(../img/loc_icon.png) no-repeat center; transition: 0.1s; }
.headerSide .miniMapOpen:hover, .headerSide .miniMapOpen:focus {background-color: #3e67bb;border: none;outline: none;}
.headerSide .miniMapClose {opacity: 0;transition: 0.5s;float: left;height: 80px;width: 80px;background: #3e67bb url(../img/minimap_x.png) no-repeat center;transition: 0.1s;}
.headerSide .miniMapClose:hover,.headerSide .miniMapClose:focus { background-color: #3e67bb; }
.miniMap { opacity: 0; z-index:2; visibility: hidden; position: absolute; width: 360px; height: 203px; top: 110px; right: 0; transition: visibility 0.5s, opacity 0.5s; }
.miniMapMarker { position: absolute; display:block; width:10px; height:10px; margin-left:-5px; margin-top:-5px; border-radius: 10px; background:#1c71e5; }
.miniMapMarker.active { z-index:1; width:28px; height:40px; background:url(../img/mk.png) no-repeat center; margin-left:-14px; margin-top:-35px; }
.allMenuOpen { display: none; }
#main { position: absolute; left: 0; right: 0; top: 80px; bottom: 0; }
#pano { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: gray; }
#krpanoSWFObject * { box-sizing: content-box; }
.controlWrap { position: absolute; bottom: 0; left: 50%; margin-left: -275px; }
.controlWrap .control { float: left; margin-right: 10px; background: rgba(0, 0, 0, 0.8); padding: 0 30px; }
.controlWrap button { display: block; width: 60px; height: 60px; float: left; }
.controlZoozmIn { background: url(../img/control_zoomin.png) no-repeat center; }
.controlZoomOut { background: url(../img/control_zoomout.png) no-repeat center; }
.controlUp { background: url(../img/control_up.png) no-repeat center; }
.controlDown { background: url(../img/control_down.png) no-repeat center; }
.controlLeft { background: url(../img/control_left.png) no-repeat center; }
.controlRight { background: url(../img/control_right.png) no-repeat center; }
.controllFullScreen { background: url(../img/control_fullscreen.png) no-repeat center; }
.controlWrap .popupBtn { display: block; float: left; background: rgba(0, 0, 0, 0.5) url(../img/control_popup.png) no-repeat center; }
.popup { opacity: 0; z-index: -1; width: 562px; background: #ffffff; position: absolute; top: 50%; left: 50%; margin-left: -281px; margin-top: -229px; transition: opacity 0.4s, margin-top 0.4s; }
.popupTop { padding-left: 52px; padding-top: 33px; padding-bottom: 52px; }
.popupTop h2 { color: #023a65; font-weight: 400; font-size: 30px; padding-bottom: 23px; }
.popupTop h2 strong { font-weight: 700; }
.popupTop p { color: #023a65; font-size: 16px; line-height: 1.5; }
.popupClose { position: absolute; top: 33px; right: 22px; width: 44px; height: 44px; background: url(../img/x.png) no-repeat center; }
.mouseImg { display: block; background: url(../img/mouse.png); width: 562px; height: 457px; border-top: 1px solid #f5f5f5; }

.detailView { width: 618px; background: #fff; position: absolute; bottom: 0; right: -618px; top: 80px; transition:0.5s; padding-top: 600px; z-index:3; font-family: 'Malgun Gothic','apple sd gothic neo', sans-serif; display:none; }
.detailViewClose { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; background: url(../img/x.png) no-repeat center; }
.detailViewInternational { font-family: 'Noto Sans Korean', sans-serif; font-weight: 300; }
.thumbnailSlider { opacity: 0; position: absolute; left: -63px; top: 72px; width: 541px; height: 362px;}
.thumbnailSlider:before { position: absolute; content: ''; width: 541px; height: 329px; border: 1px solid #f5f5f5; left: -20px; top: -20px; }
.thumbnailContainer { width: 541px; height: 362px; background: #fff; }
.thumbnailItem { position: absolute; top: 0; left: 0; width:100%; height:100%; }
.thumbnailItem img { display: block; width:100%; height:100%; }
.thumbnailControl { position: absolute; top: 50%; right: -71px; margin-top: -26px; }
.thumbnailControl button { display: block; width: 53px; height: 53px; float: left; }
.thumbnailPrev { background: #fff url(../img/arrow_left.png) no-repeat center; }
.thumbnailNext { background: #3e67bb url(../img/arrow_right.png) no-repeat center; }
.detailViewTitleWrap { opacity: 0; position: absolute; left: 0; right: 0; top: 434px; color: #003964; padding: 50px; border-bottom: 1px solid #e9e9e9; }
.detailViewTitle { font-size: 30px; }
.detailViewInternational { }
.detailViewInternational > p { float: left; }
.detailViewCn { margin-right: 20px; }
.detailViewInfo { opacity: 0; padding: 50px; height: 100%; overflow-y: auto; }
.detailViewBasic { font-size: 18px; margin-bottom: 42px; }
.detailViewBasic:after { display: block; content: ''; clear: both; }
.detailViewBasic dt { float: left; clear: left; font-weight: 800; margin-right: 30px; }
.detailViewBasic dd {  float: left; }
.detailViewEra span + span { margin-left: 50px; }
.detailViewOrigin span + span { margin-left: 17px; }
.detailViewDescription { font-size: 16px; }

body.subActive.miniMapActive .headerSide .path { opacity: 1; }
body.subActive.miniMapActive .headerSide .miniMapClose { opacity: 1; }
body.subActive.miniMapActive .miniMap {display: none !important;opacity: 1;visibility: visible;transition: visibility 0s, opacity 0.5s;}
body.subActive.miniMapActive .headerSide .miniMapOpen:hover {background-color: #3e67bb;border: none;outline: none;}
body.subActive.miniMapActive .headerSide .pathWrap { margin-right: 0; }
body.subActive.miniMapActive .headerSide .path a span { opacity: 1; }
body.detailViewActive .detailView { right: 0; }
body.detailViewActive .thumbnailSlider { opacity: 1; }
body.detailViewActive .detailViewTitleWrap { opacity: 1; }
body.detailViewActive .detailViewInfo { opacity: 1; }
body.popupActive .popup { z-index: 2; opacity: 1; margin-top: -329px; }
body.subActive.miniMapActive .miniMap:after {
	content:'';
	display:block;
	position:absolute;
	top:-30px;
	left:50%;
	margin-left:-10px;
	border-style:solid;
	border-left-width:8px;
	border-right-width:8px;
	border-top-width:10px;
	border-bottom-width:0px;
	border-left-color:transparent;
	border-right-color:transparent;
	border-top-color:#003964;
}
body.mainActive .miniMapOpen { display:none !important; }
body.mainActive .miniMapClose { display:none !important; }


@media screen and (max-width:1700px) {
	#gnb {/* left: 30%; *//* margin-left: 0; */}
}
@media screen and (max-width:1600px) {
	#gnb {/* left: 25%; */}
}
@media screen and (max-width:1500px) {
	#gnb {/* left: 50%; */left: auto;/* margin-left: -350px; */right: 0;transform: translate(0, 0);}
	.headerSide .path {/* display: none; */}
	.headerSide .miniMapClose { margin-left: -80px; }
	.headerSide .miniMapClose { display: none; }
	body.subActive.miniMapActive .headerSide .miniMapClose { display: block; }
	body.subActive.miniMapActive .miniMap:after {
		left:auto;
		margin-left:0;
		right:30px;
		border-top-color:#032a48;
	}
}
@media screen and (min-width:1980px) {
	.dept2_ul, .dept3_ul { overflow: hidden; display: block !important; }
}
@media screen and (max-width:1979px) {
	#header { position: static; overflow: visible; height: 0; }
	.hd {display:none;box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.1);position: absolute;height: auto;left: auto;top: 0;right: -326px;bottom: 0;width: 326px;z-index: 100;transition: 0.5s;}
	.hd_top { position: relative; display: block; height: 66px; background: #3e67bb; }
	.hd_top h2 { font-weight: 700; font-size: 18px; color: #ffffff; line-height: 66px; padding-left: 30px; }
	body.allMenuActive .hd {display:block;right:0;/* animation-name: menuAni; *//* animation-delay: 100ms; *//* animation-duration: 300ms; *//* animation-fill-mode: forwards; */}

	@keyframes menuAni {
		0% {
			right:-326px;
		}
		100% {
			right:0;
		}
	}

	#main { top: 0; }
	#header .dept1_li .dept2_li { opacity: 1; width: auto; overflow: visible; transition: none; }
	.dept2_ul { height: auto; }
	#header .dept1_li:nth-child(1) .dept2_li { float: none; }
	.dept1_li {float: none;display: block;}
	.dept1_li:last-child { border-bottom: 1px solid #e8e6e6; }
	#gnb {display: block;overflow-y: scroll;position: relative;height: 90%;padding: 0;/* position: static; *//* margin-left: 0; *//* overflow-y: auto; *//* height: 100%; *//* display: block; */}
	#header .dept1_li:nth-child(1) .dept2_li + .dept2_li { margin-left: 0; }
	.dept1_a { height: 62px; }
	.dept1_a span { line-height: 62px; font-size: 18px; }
	.dept1_a:after { display: none; }
	.dept1_a:before { content: ''; position: absolute; display: block; top: 50%; margin-top: -5px; right: 30px; width: 10px; height: 10px; background: url(../img/triangle.png) no-repeat center; transition: 0.5s; }
	.dept1_a.active:before { transform: rotate(-90deg); }
	.dept1_li + .dept1_li { border-top: 1px solid #e8e6e6; }
	.dept2_li { background: #f5f5f5; }
	.dept2_ul { padding: 0; }
	.dept2_a.box { width: 100%; height: 62px; line-height: 62px; background: #f5f5f5; color: #333; text-align: left; }
	.dept2_li + .dept2_li { border-top: 1px solid #e8e6e6; }
	.dept2_a { width: auto; height: 62px; line-height: 62px; padding-left: 50px; }
	.dept2_a span { padding-left: 0; padding-right: 0; }
	.dept2_a:after { display: none; }
	.dept2_a.acodian:hover span { background: none; padding-left: 0; padding-right: 0; }
	.dept2_a.acodian:before { content: ''; position: absolute; display: block; top: 50%; margin-top: -5px; right: 30px; width: 10px; height: 10px; background: url(../img/triangle_black.png) no-repeat center; transition: 0.5s; }
	.dept2_a.acodian.active:before { transform: rotate(-90deg); }
	.dept3_li { background: #e8e6e6; }
	.dept3_li + .dept3_li { border-top: 1px solid #fff; }
	#header .dept1_li:nth-child(1) .dept3_li { width: auto; }
	.dept3_a { height: 60px; line-height: 60px; padding-left: 50px; font-size: 16px; }
	.dept3_a span { background: url(../img/blet_2.png) no-repeat left center; padding-left: 10px; padding-right: 0; }
	.dept3_a:after { display: none; }
	.dept3_a:hover span { background: url(../img/blet_2.png) no-repeat left center; padding-left: 10px; padding-right: 0; }
	.controlWrap { display: none; }
	.headerSide {padding-right: 64px;height:64px;z-index:2;}
	.allMenuOpen {right: 0px;position: absolute;width: 64px;height: 64px;display: block;background: #3e67bb url(../img/allmenu_icon.png) no-repeat center;z-index: 50;}
	.headerSide .miniMapOpen { width: 64px; height: 64px; }
	.headerSide .miniMapClose {width: 64px;height: 64px;}
	.allMenuClose { position: absolute; top: 0; right: 0; display: block; width: 66px; height: 66px; position: absolute; background: url(../img/x_white.png) no-repeat center; }
	.dept2_ul, .dept3_ul { overflow: hidden; display: none; }
	.detailView { width: 450px; top: 0; z-index: 3; padding-top: 446px; }
	.thumbnailSlider { width: 394px; height: 264px; }
	.thumbnailContainer { width: 394px; height: 264px; }
	.thumbnailContainer img { width: 394px; height: 264px; }
	.detailViewClose { top: 5px; }
	.thumbnailSlider:before { width: 377px; height: 239px; left: -15px; top: -15px; }
	.detailViewTitleWrap { top: 336px; padding: 30px; }
	.detailViewTitle { font-size: 22px; }
	.detailViewInternational > p { font-size: 12px; }
	.detailViewBasic { font-size: 14px; margin-bottom: 30px; }
	.detailViewInfo { padding: 30px; }
	.detailViewDescription { font-size: 14px; }
	.detailViewEra span + span { margin-left: 36px; }
	.detailViewOrigin span + span { margin-left: 12px; }
	.detailViewBasic dt { margin-right: 25px; }
	.miniMap { top:74px; }
	body.subActive.miniMapActive .miniMap:after { right:86px; top:-10px; }
	.dept2_a:hover span { padding-left:0; background:none; }
	#logo { display:none; }
	.headerSide .path a span {height: 65px;line-height:65px;}
}

/* 
#pano *:focus {
	outline:1px dashed red;
} */