@import url(/pcms/common/fonts/ko/pretendard/fontStyle.css);
* { 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: 'gothic'; line-height: 1.5; font-size: 15px; }
.nsr_l { font-family: 'gothic'; font-weight: 300; }
.nsr_r { font-family: 'gothic'; font-weight: 400; }
.nsr_b { font-family: 'gothic'; font-weight: 700; }
.nsr_eb { font-family: 'gothic'; font-weight: 800; }
.skip { position: fixed; top: -10000px; left: -10000px; font-size: 0; }
#intro { display: none; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 5; background: url(../img/intro-min.png) no-repeat center; background-size: cover; }
#intro:before { display: block; content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); }
#intro .introText { position: absolute; width: 416px; height: 422px; top: 50%; left: 50%; background: url(../img/intro_text.png) no-repeat center;transform:translate(-50%,-50%)}
#intro .introText:before{display: inline-block;position: absolute;left: -20%;top: -40px;width: 445px;height: 497px;border-radius: 288px 150px 180px 188px;background: rgba(255,255,255,0.1);content: '';z-index: -1;transform: translate(-50%, 0);animation: bg_circle 5s linear infinite;}


#intro .copyright { position: absolute; left: 0; right: 0; bottom: 25px; text-align: center; color: rgba(255, 255, 255, 0.8) }
.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 {position: absolute;top: 0;left: 50%;/* margin-left: -250px; *//* width: 100%; */transform: translate(-59%, 0);display: inline-block;}
#logo { position: absolute; top: 20px; left: 40px; z-index: 2; }
#logo a { display: block; }
.dept1_ul:after { content: ''; display: block; clear: both; }
.dept1_li { float: left; position: relative; }
.dept1_a {position: relative;display: block;width: 100%;height: 80px;padding: 0 15px;}
.dept1_a span {display: block;height: 100%;line-height: 80px;font-weight: 600;font-size: 16px;}
.dept1_a span:before{opacity: 0.05; display: inline-block;position: absolute;right:30px;top:-20px;width:80px;height:80px;border-radius: 50%;background:#ef611e;content: '';transform: scale(0);-webkit-transform: scale(0);transition:.5s;-webkit-transition:.5s;}
.dept1_a span:hover:before,
.dept1_a span:focus:before{transform: scale(1);-webkit-transform: scale(1);}
/*
#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: #ef611e; }
.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: #ef611e; }
.dept2_a:hover { display: block; color: #ef611e; }
.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: #ef611e; 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: #ef611e; }
.dept3_a:hover { display: block; color: #ef611e; }
.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 30px;float: left;background-color: #e45715;position:relative;}
.headerSide .path:before{display: inline-block;position:absolute;left:-20px;top: -70px;width:100px;height:120px;border-radius:80px;background: rgba(255,255,255,0.1);content: '';animation: bg_circle 5s linear infinite;-webkit-animation: bg_circle 5s linear infinite;}

@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; float: left; position: relative; color: #fff; }
.headerSide .path a span { display: block; height: 80px; opacity: 0; line-height: 80px; padding: 0 20px; transition: 0.5s; transition-delay: 0.25s; }
.headerSide .path a:first-child span { padding-left: 0; }
.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: #ef611e url(../img/loc_icon.png) no-repeat center; transition: 0.1s; }
.headerSide .miniMapOpen:hover, .headerSide .miniMapOpen:focus { background-color: #e45715; }
.headerSide .miniMapClose { opacity: 0; transition: 0.5s; float: left; height: 80px; width: 80px; background: #ef611e url(../img/minimap_x.png) no-repeat center; transition: 0.1s; }
.headerSide .miniMapClose:hover,.headerSide .miniMapClose:focus { background-color: #e45715; }
.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: #ef611e 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.mainActive #intro { display: block; }
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: #ef611e;}
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:1101px) {
	.dept2_ul, .dept3_ul { overflow: hidden; display: block !important; }
}
@media screen and (max-width:1100px) {
	#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: #ef611e; }
	.hd_top h2 { font-weight: 700; font-size: 18px; color: #ffffff; line-height: 66px; padding-left: 30px; }
	body.allMenuActive .hd { display:block; 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 {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: #ef611e url(../img/allmenu_icon.png) no-repeat center;z-index: 50;}
	.headerSide .miniMapOpen { width: 64px; height: 64px; }
	.headerSide .miniMapClose { width: 64px; height: 64px; margin-left: -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; }
}

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