* { 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; line-height: 1.5; font-size: 15px; }
.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 .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: #1D2D4A;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%;}

#logo { position: absolute; top: 50%;transform: translateY(-50%);left: 50px; z-index: 2; }
#logo a { display: flex; }
.hd {background: #fff;}
.hd_top {display: none;}
#gnb {position: relative;padding: 0 270px;}
#gnb .dept1_ul {display: flex;justify-content: center;}
#gnb .dept1_ul .dept1_li { position: relative;}
#gnb .dept1_ul .dept1_li:not(:first-of-type)::before {content: '';position: absolute;right: calc(100% - 2px);top: calc(50% - 2px);width: 4px;height: 4px;border-radius: 50%;background: #D9D9D9;}
#gnb .dept1_ul .dept1_li .dept1_a {position: relative;display: block;width: 100%;height: 80px;padding: 0 20px;}
#gnb .dept1_ul .dept1_li .dept1_a span {display: flex;align-items: center;height: 100%;line-height: 1.3;font-weight: 600;font-size: 17px;color: #222;}
#gnb .dept1_ul .dept1_li.active .dept1_a span,
#gnb .dept1_ul .dept1_li .dept1_a:hover span,
#gnb .dept1_ul .dept1_li .dept1_a:focus span {color: #01838C;}

#intro .i-text {position: relative;left: 50%;top: 47%;transform: translate(-50%, -50%);display: inline-block;text-align: center;max-width: 471px;max-height: 471px;width: 100%;height: 100%;}
#intro .i-text:before {content:'';width: 428.75px;aspect-ratio: 1;display: inline-block;position: absolute;background: linear-gradient(147deg, rgba(0, 218, 226, 0.90) 7.53%, rgba(0, 55, 154, 0.90) 94.15%);border-radius: 120px;transform: rotate(-15deg) translate(-50%, -50%);left: 50%;top: 50%;z-index: -1;transform-origin: left top;}
#intro .i-text .inner {width: 100%;height: 100%;display: block;padding-top: 71px;}
#intro .i-text .person-img {position: relative;z-index: -1; background-image: url(../img/intro-person.png);width: 222px;height: 111px;display: block;background-repeat: no-repeat;display: inline-block;background-size: contain;background-position: center bottom;}
#intro .i-text .title {font-size: 20px;font-family: 'gmarket';font-weight: 400;color: #fff;letter-spacing: -1px;background-color: #1D2D4A;text-align: center;border-radius: 100px;line-height: 1;padding: 12px 22px;display: block;max-width: 281px;margin: 0 auto;margin-top: -15px;height: 45px;line-height: 25px;}
#intro .i-text .tit {display: block;font-family: 'gmarket';color: #FFF93D;font-size: 60px;font-weight: 600;text-align: center;line-height: 1.1;height: 53px;margin-top: 17px;text-shadow: 0px 5px 22px rgba(0, 0, 0, 0.25);letter-spacing: -1px;}
#intro .i-text .sub {font-family: 'gmarket';color: #fff;letter-spacing: -0.5px;line-height: 1;display: block;text-align: center;margin-top: 23px;font-weight: 400;word-break: keep-all;}
#intro .i-text .sub strong {display: inline-block;vertical-align: middle;margin-right: 1px;letter-spacing: 0;}
#intro .i-text .start {position: absolute;right: -41px;bottom: 71px;width: 99px;height: 99px;background-color: #FFF93D;border-radius: 50%;font-family: 'gmarket';color: #000;font-size: 15px;font-weight: 400;/* padding-top: 32px; */display: inline-block;padding-top: 30px;display: flex;justify-content: center;align-items: flex-start;}
#intro .i-text .start:before {content:'';background-image: url(../img/intro-arrow.png);width: 25px;height: 9px;display: inline-block;position: absolute;bottom: 35px;left: 50%;transform: translate(-50%, 0);background-repeat: no-repeat;}

@media (max-width:767px) {
	#intro .i-text {max-width: 400px;max-height: 400px;}
	#intro .i-text:before {width: 400px;}
	#intro .i-text .start {right: 50%;transform: translate(50%, 0);bottom: -30px;}
	#intro .i-text .inner {padding: 40px 30px 0;}
	#intro .i-text .sub {line-height: 1.2;margin-top: 13px;}
	#intro .i-text .tit {font-size: 50px;}
	#intro .i-text .title {padding: 10px 20px;font-size: 18px;}
	#intro .i-text .person-img {width: 200px;}
}
@media (max-width:500px) {
	#intro .i-text {max-width: 350px;max-height: 350px;}
	#intro .i-text:before {width: 350px;}
	#intro .i-text .inner {padding: 15px 30px 0;}
	#intro .i-text .start {bottom: -40px;}
	#intro .i-text .tit {font-size: 42px;}
	#intro .i-text .title {max-width: 250px;font-size: 16px;}
	#intro .i-text .sub {margin-top: 6px;}
}

.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: 80px;padding: 0 20px;float: left;background-color: #00A8AE;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: #1D2D4A url(../img/loc_icon.png) no-repeat center;transition: 0.1s;}
.headerSide .miniMapOpen:hover, .headerSide .miniMapOpen:focus {background-color: #1D2D4A;}
.headerSide .miniMapClose {opacity: 0;transition: 0.5s;float: left;height: 80px;width: 80px;background: #00A8AE url(../img/minimap_x.png) no-repeat center;background-position: center center; transition: 0.1s;}
.headerSide .miniMapClose:hover,.headerSide .miniMapClose:focus {background-color: #00A8AE;}
.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: #1D2D4A 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 > 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;overflow: hidden;}
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: #1D2D4A;}
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 (max-width:1700px) {
	#logo {left: 20px;}
	#gnb {padding: 0 240px;}
	#gnb .dept1_ul .dept1_li .dept1_a {padding: 0 15px;}
	#gnb .dept1_ul .dept1_li .dept1_a span {font-size: 16px;}
	.headerSide .path {padding: 0 0 0 20px;}
	.headerSide .path a:first-child span {padding-right: 0;}
	.headerSide .miniMapClose {width: 60px;}
}
@media (max-width:1500px) {
	#logo {left: 20px;}
	#gnb {padding: 0 0 0 250px;}
	.headerSide {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 (max-width:1280px) {
	#gnb .dept1_ul .dept1_li .dept1_a {padding: 0 10px;}
}
@media (min-width:1200px) {
	.dept2_ul, .dept3_ul { overflow: hidden; display: block !important; }
}
@media (max-width:1200px) {
	#gnb {padding: 0;}
	#gnb .dept1_ul {flex-direction: column;}
	#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: #1D2D4A;}
	.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; }
	#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: #1D2D4A 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; }
}

@media (max-width:640px) {
	.headerSide .path a span {height: 55px;line-height: 56px;}
}