/*@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);*/
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(../fonts/XEIcon-2.2.0/xeicon.min.css);
@-ms-viewport { width:device-width; }
html,body,ul,ol,li,dl,dt,dd { padding: 0; margin: 0; }
html,body { 
	height: 100%;
	overflow: hidden;
}
body { 
	font-family: "Noto Sans KR", sans-serif;
	font-family: "Nanum Gothic", sans-serif;
	margin:0; padding:0; 
	font-size:16px; 
	color: #fff;
	background: #222;

	text-shadow: rgba(0,0,0,.01) 0 0 1px;

	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: unset;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-text-stroke: .025em rgba(51,51,51,0.50);


}

ul,ol,li { list-style: none; }


.btnArea { position: absolute; top: 40px; left: 10px; }

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

.overflow { overflow: hidden; min-width: 100%; }

.vr { 
	position: absolute; 
	left: 0; top: 0;
	width: 100%; height: 100%;
	z-index: 1; 
}
#cms { height: 100%; }

#dummy,
#dummy embed, 
#dummy object { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

#header,#cms{ 
/*
	min-width: 1200px; */
}

#header { 
	position: absolute; left:0; 
	z-index: 100; background: rgba(255,255,255,.8); width: 100%; line-height: 50px; overflow: hidden; 
	border-bottom: 3px #333 solid;
}
#header .group { display: table; height: 50px; }

#header .artist { 
	width: 100%; height: 100%; display: table-cell; 
	vertical-align: top; white-space: nowrap; overflow: hidden; 
	text-overflow: ellipsis;
}

#header .artist .group { display: table; height: 50px; line-height: 0; }

#header .artist .docent { 
	display: table-cell; height: 100%; vertical-align: middle; padding-left: 10px; font-weight: bold;
}
#header .artist .logo { 
	display: table-cell; height: 100%; vertical-align: middle; padding: 0 5px; font-weight: bold;
}
#header .artist .logo img { height: 42px; width: auto;  }
#header .artist .logo span { display: inline-block; padding-bottom: 3px; padding-left: 10px; cursor: pointer; }

#header .artist .exhibit { 
	display: table-cell; height: 100%; 
	vertical-align: middle; 
	color: #333; line-height: 16px;
	font-size: 1em;
}
#header .artist .exhibit .tsn { 
	font-weight: 700; font-size: 14px; padding: 0px 0;
}
#header .artist .exhibit .tsd { 
	padding-top:2px;
	font-size: 11px; color: #999;
}

#header .artist .split {
	width: 50px;
	height: 100%;
	background: url(../img/split.png) no-repeat 50%;
	
}

#header .artist .titlegroup { cursor: default; display: table-cell; max-width: 500px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 18px; height: 100%; vertical-align: middle; text-indent: 14px;  }
#header .artist .title { font-size: 11px; color: #b6b6b6; }

#header .artist .subtitle { font-size: 9px; color: #888; letter-spacing: 0; }
#header .artist .exhibit_place { letter-spacing: 0; font-weight: bold; }


#header .gnb { padding-left: 30px; display: table-cell; vertical-align: top; }
#header .gnb:after { clear: both; }

.header-bg { 
	position: absolute; left: 0; z-index: 99; background: #fff; height: 50px; width: 100%; 
}

.header { top: 0; }

#gnb { font-size: 1em; display: table; overflow: hidden; float: right; /*background: rgba(83,135,97,0.6);  */}
#gnb .type { 
	display: table-cell;
	width: 200px; 
	text-align: center; 
	height: 100%; 
	transition: background-color 0.8s, color 0.8s;/*
	background: url(../img/dot.png) 0 14px no-repeat;*/
	color: #999;
	position: relative;
	font-weight: bold;
	border-left: 1px solid rgba(0,0,0,0.06);
	padding: 0 5px;
}
#gnb .type .title  { cursor: pointer; overflow: hidden; white-space:nowrap; }
#gnb .type:hover,
#gnb .type.on { color: #111; }
#gnb .type .place-list { 
padding: 5px 0; font-weight: normal; line-height: 32px; font-size: .8em;
}

#gnb .type .place-list .int,
#gnb .type .place-list .place { 
	box-sizing: border-box; width: 200px; overflow: hidden; padding: 0 5px; cursor: pointer; transition: background-color 0.8s;  white-space: nowrap; text-overflow: ellipsis; 
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	color: #999;
}
#gnb .type .place-list .int:hover,
#gnb .type .place-list .place:hover,
#gnb .type .place-list .place.on { 
	font-weight:bold; color: #111; background: #111; background: rgba(255,255,255,0.1); border-color: rgba(0,0,0,0.1); 
}

#gnb .type.dual { width: auto; }
#gnb .type.dual .title { width: 200px; }
#gnb .type.dual .place-list { text-align: left; }
#gnb .type.dual .place { 
	display: inline-block;
	width: 50%;
}
#gnb .type.on,
#gnb .type:hover{
	background: rgba(250,250,250,0.04);
}

.message { 
	padding: 5px 10px; 
	color: #fff; font-size: 0.8em; 
	position: absolute; left: 50%; top: 50%; 
	background: rgba(0,0,0,0.5); 
	border-radius: 50px; 
	z-index: 101;
	box-sizing: border-box;
	opacity: 0;
}


#copyconsole { position: fixed; left: -1000px; top: -1000px; }

#videoPlayer { position: absolute; left:0; top:0; display: table; background: rgba(0,0,0,0.4); width: 100%; height: 100%; z-index: 101; }
#videoPlayer .middle { vertical-align: middle; display: table-cell; height: 100%; width: 100%; text-align: center; }
#videoPlayer .close { 
	background: url(../module/img/close.png); width: 48px; height: 48px; margin: 20px auto; cursor: pointer;
	background-size: contain;
}
#videoPlayer iframe { display: inline-block; margin-bottom: 48px; }

#current { 
	width: 100%; position: absolute; left: 0; bottom: 18px; text-align: center; color: #fff; z-index: 1; pointer-events: none;
	padding: 0;
	box-sizing: border-box;
	font-size: .7em;
	text-shadow: 1px 1px 2px #000;
	display: none;
}

#current .groups { display: table; margin: auto; border-radius: 20px; }
#current .groups .padding { padding: 5px 10px; }
#current i { position: relative; top: 2px; }



.addon { display: table; position: absolute; left:0;top:0;width: 100%; height: 100%; z-index: 100; background: rgba(0,0,0,0.9); }
.addon .vm { height: 100%; vertical-align: middle }
.addon iframe { width: 100%; margin: auto; height: 99%; }

#map { position: absolute; right: 10px; bottom: 10px; z-index: 4001; }
#map iframe { width: 480px; height: 320px; border:0 }

#map .head { position: absolute; left: 0; top:0; width: 100%; z-index: 1000; background: #ccc; display: table; }
#map .head .left { display: table-cell; }
#map .head .right { display: table-cell; text-align: right; }
#map .btns { display: inline-block; cursor: pointer; padding: 5px;}

#auto_cover { 
	width: 100%; height: 100%; left: 0; top:0; position: fixed; z-index: 9999; cursor: pointer; 
	background: url(../img/autodrive.png) no-repeat 50%;
	display: none;
}

.caption { 
	width: 640px; 
	position: fixed; 
	left: 50%; 
	bottom: 0;
	margin-bottom: 30px;
	margin-left: -320px; 
	background: rgba(0,0,0,0.8); 
	border-radius: 10px;
	display: table;
}
.caption .pic { 
	display: table-cell;
	vertical-align: top;
	padding: 10px;
}
.caption .pic img { border-radius: 5px; width: auto; height: 90px; }
.caption .text { 
	display: table-cell;
	vertical-align: middle;
	padding: 10px;
}
.caption .text .overwrap {  height: 80px; overflow-y: auto; padding: 5px 10px; }

.caption .close { 
	position: absolute; right: 0; top: -36px; width: 32px; height: 32px; text-align: center; color: #fff; 
	font-size: 1.2em;
	line-height: 34px;
	background: rgba(0,0,0,0.6);
	border-radius: 32px;
	cursor: pointer;
	overflow: hidden;
}



.area { position: absolute; left: 10px; top: 50%; z-index: 1; margin-top: -200px; font-size: 11px;}
.area .mn { 
	cursor: pointer; font-weight: bold; 
	background: #2e2e2c; border: 3px solid #fff; 
	width: 48px; height: 48px; text-align: center; line-height: 48px; border-radius: 48px; margin: 40px 0; position: relative; z-index: 101;
	color: #eee;

	transition: color 0.3s, background 0.3s;
}
.area .line {
	width: 2px; height: 300px; position: absolute; left: 50%; margin-left: -3px; 
	border-right: 3px dashed #fff; top: 46px;
}

.area .mn.on,
.area .mn:hover { background: #0b79ab; color: #fff; }


.mobile { display: none; }

#list { 
	position: absolute; left: 0; top: 0; z-index: 4000; width: 100%; height: 100%; background: rgba(0,0,0,0.8);
	overflow: hidden;
	overflow-y: scroll;
	display: none;
}

#list .container { padding: 30px 10px; }

#list .title { 
	padding: 10px 10px;
	font-size: 18px; 
	text-align: center; background: rgba(0,0,0,0.7); font-weight: bold; 
	display: block;
}

#list ul { 
	list-style: none; padding: 10px; margin: 10px; text-align: center; background: rgba(255,255,255,0.1); 
	border-radius: 5px;
	box-shadow: 1px 1px 5px rgba(50,50,50,0.5);
}
#list li { 
	cursor: pointer; display: inline-block; font-size: 0; padding: 10px; background: #000; margin: 10px; 
	transition: background .4s
}
#list li:hover,
#list li.on { 
	background: rgba(202,35,39,0.8); 
}
#list li:hover .thumb .over { 
	/*background-size: 200% auto;*/
	opacity: 1;
}

#list li .thumb { 
	width: 220px; height: 200px; 
	background: #333 no-repeat 50%; 
	background-size: 100%; 
	display: table;
}
#list li .thumb .over { 
	width: 100%; height: 100%; display: table-cell; vertical-align: middle;  color: #fff; font-size: 72px; text-align: center;
	background: rgba(202,35,39,0.4);
	opacity: 0;
	transition: opacity 0.2s;
}

#list li .text { font-size: 12px; padding: 20px 0 10px; }
#list .close { 
	position: fixed; top: 5px; left: 50%;
	text-align: center;
	font-size: 32px;
	background: #37a7d1;
	width: 48px;
	height: 48px;
	margin-left: -24px;
	border-radius: 64px;
	cursor: pointer;
	opacity: .8;
	background: rgba(202,35,39,0.8); 
	transition: opacity 0.4s;
	z-index: 1000;
	display: table;
}
#list .close:hover { opacity: 1; }
#list .close i { display: table-cell; vertical-align: middle; }


#narr { 
	position: absolute; 
	bottom: 64px; left: 50%;  
	width: 1000px; margin-left: -500px;
	background: rgba(50,50,50,0.8);
	border-radius: 5px;
	z-index: 4002;
	display: none;
}

#narr .group { display: table; width: 100%;  } 
#narr .icon { display: table-cell; vertical-align: middle; width:48px; padding: 10px; padding-right: 0; position:relative; height: 100%; }
#narr .icon i { 
	width: 48px; height: 48px; display: block; text-align: center; background: #626263; border-radius: 64px; 
	line-height: 48px;
	font-size: 32px;
	z-index: 5; 
	position: relative;
}

#narr .icon ul { position: absolute; left:50%; top: 60px; width: 48px; height: 48px; margin-left: -21px; margin-top: -26px; z-index: 4; }
#narr .icon ul li { 
	width: 100%; height: 100%; border-radius: 48px; border: 2px solid #fff; position: absolute; left:0; top: 0; opacity: 0;
	transition: opacity .2s linear;
	animation: spkanimte 4s ease-in-out infinite;
	transform: scale(0.8);
}

#narr .icon ul li:first-child {
    animation-delay: 0;
}

#narr .icon ul li:nth-child(2) {
    animation-delay: 0.8s;
}

#narr .icon ul li:nth-child(3) {
    animation-delay: 1.6s;
}

#narr .icon ul li:nth-child(4) {
    animation-delay: 2.4s;
}

#narr .icon ul li:nth-child(5) {
    animation-delay: 3.2s;
}

@keyframes spkanimte {
    0% {
        transform: scale(0.8);
        opacity: .8;
    }
    50% {
        transform: scale(1.2);
        opacity: .5;
    }
    100% {
        transform: scale(1.5);
        opacity: .1;
    }
}


#narr .text { 
	display: table-cell; padding: 10px 10px 10px 10px; vertical-align: middle; font-size: 11px; line-height: 18px;
	width: 100%;
	text-align: center;
	/*word-break: keep-all;
	*/
}
#narr .text .insert { height: 100px; overflow-y: auto; padding-right: 10px; }

#narr .text p { margin: 5px 0; padding: 0;}

#narr .close { 
	position: absolute; right: 0; top: -50px;
	border-radius: 44px;
	width: 36px; 
	height: 36px; 
	font-size: 20px;
	text-align: center; 
	background: rgba(0,0,0,0.8);
	cursor: pointer;
	display: table;
}
#narr .close i { display: table-cell; vertical-align: middle;}

#narr .audio { 
	height: 6px; border-radius: 5px;
	position: absolute; 
	top: 0; background: #ca2327;
	width: 0;

}
#narr .audio audio { display: none; }






.mobile-ver .mobile { display: block; }


.mobile-ver #gnb .type.dual { width: 100%; }
.mobile-ver  #gnb .type.dual .title { width: 100%; }
.mobile-ver  #gnb .type.dual .place { 
	border-right: 0;
}
.mobile-ver  #gnb .type.dual .place.w2 { 
	position: static; top: 0; left: 0; 
}


.mobile-ver #header { overflow: visible; height: 50px; max-height: 100%:}
.mobile-ver #header .group { display: block; height: auto; margin-top: 0; }
.mobile-ver #header .group .artist { display: block;  }
.mobile-ver #header .group .titlegroup { width: 100%; }
.mobile-ver #header .group .artist .title { letter-spacing: 0px; text-align: left; padding: 0; text-indent: 15px; }
.mobile-ver #header .artist .exhibit { font-size: .8em; }
.mobile-ver #header .artist .exhibit .tsn { letter-spacing: -1.2px; font-size: 1em;}
.mobile-ver #header .artist .exhibit .tsd { font-size: .9em;}
.mobile-ver #header .logo { padding: 0 5px; }
.mobile-ver #header .logo img { height: 48px; width: auto;  }
.mobile-ver #header .gnb { display: block; position: absolute; top: 50px; left: 0; width: 100%; z-index: 100; margin: 0; padding: 0; }


.mobile-ver #gnb { font-size: .8em; display: none; overflow: hidden; float: none; background: #222; }
.mobile-ver #gnb .type { 
	display: block;
	width: 100%; 
	text-align: center; 
	height: 100%; 
	transition: background-color 0.8s, color 0.8s;
	color: #bbb;
	padding: 0;
}
.mobile-ver #gnb .type .title  { cursor: pointer; overflow: hidden; white-space:nowrap;  text-align: center; background: rgba(0,0,0,0.5);}
.mobile-ver #gnb .type:hover,
.mobile-ver #gnb .type.on { font-weight: bold; color: #fff; }
.mobile-ver #gnb .type .place-list { 
	padding: 5px; font-weight: normal; line-height: 32px; width: 100%; text-align: left;
	box-sizing: border-box;
}

.mobile-ver #gnb .type .place-list .int,
.mobile-ver #gnb .type .place-list .place { 
	width: 20%;
	box-sizing: border-box; overflow: hidden; padding: 0 5px; cursor: pointer; transition: background-color 0.8s;  white-space: nowrap; text-overflow: ellipsis; 
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	display: inline-block;
	text-align: center;
}
.mobile-ver #gnb .type .place-list .int:hover,
.mobile-ver #gnb .type .place-list .place:hover,
.mobile-ver #gnb .type .place-list .place.on { font-weight:bold; background: #111; color: #fff; background: rgba(255,255,255,0.1); border-color: rgba(0,0,0,0.1); }

.mobile-ver .gnb-btn { 
	position: absolute;
	right: 0; top: 0;
	width: 50px; height: 50px;
	color: #fff;
	font-size: 32px; 
	text-align: Center; 
	background: #333;
	padding-top: 1px; 
	box-sizing: border-box;
}

.mobile-ver .gnb-btn .close { display: none; }
.mobile-ver #list .close { height: 48px; width: 48px; margin-left: -24px; top: 5px; font-size: 32px; }
.mobile-ver #list .close i { line-height: 48px; }
.mobile-ver #list li { padding: 0; margin:5px; position: relative; border-radius: 5px; overflow: hidden; }
.mobile-ver #list li.on .over {  opacity: 1;  }
.mobile-ver #list li .thumb { 
	width:100px; height: 100px; 
}
.mobile-ver #list li .text { 
	padding: 5px 10px; background: rgba(50,50,50,0.6); position: absolute;
	left: 5px; text-align: center;
	bottom: 5px;
	font-size: 12px;
	border-radius: 25px;
	width: 90px;
	box-sizing: border-box;
}

.mobile-ver .area {  margin-top: -110px; font-size: 9px; background: rgba(0,0,0,0.7);  border-radius: 100px; padding: 0 8px;}
.mobile-ver .area .mn { 
	width: 32px; height: 32px; line-height: 32px; margin: 0; margin: 15px 0;
}
.mobile-ver .area .line {
	height: 160px; 
	top: 46px;
}

.mobile-ver #current { bottom: auto; top: 48px; white-space: nowrap; }


/*
.mobile-ver #narr { 
	position: fixed;
	width: 0;
	height: 0;
	overflow: hidden;
	display: none;
}
*/

.mobile-ver #narr { 
	bottom: 5px; left: 5%;  
	width: 90%; margin-left: 0;
	background: rgba(50,50,50,0.8);
	border-radius: 5px;
	display: none;
}

.mobile-ver #narr .icon { width:32px; }
.mobile-ver #narr .icon i { 
	width: 32px; height: 32px;
	line-height: 32px;
	font-size: 24px;
}
.mobile-ver #narr .text { padding-right: 10px; }

.mobile-ver  #map 
{
	right: 0;
	bottom: 0;
	width: 100%;
	height: 240px;
	position: fixed;
}

.mobile-ver #map iframe { width: 100%; height: 100%; border:0 }


._dummyscreen { display: none; background: #eee; width: 100%; height: 100%; position: absolute; z-index: -1; left:0; top:0; pointer-events: none;}
._dummyscreen ._header { height: 50px; background: #4c7557; line-height: 50px; text-indent: 10px; color: #d8dad8; white-space: nowrap; }
._dummyscreen ._header .main-text { color:#104da0; font-weight: bold; }
._dummyscreen ._header .sub-text { padding-left: 10px; letter-spacing: -1px; font-size: .9em; font-weight: bold; }

._dummyscreen ._loading { display: table; position: absolute; top: 0; left: 0; height: 100%; width: 100%; text-align: center; }
._dummyscreen ._loading i {  font-size: 48px; color: #999; display: table-cell; vertical-align: middle; height: 100%; width: 100%; }
._dummyscreen ._lang { position: absolute; left: 17px; bottom: 15px; } 
._dummyscreen ._btns { position: absolute; right: 19px; bottom: 15px; } 
._dummyscreen ._btn { z-index: 10; display: inline-block; width: 29px; height: 29px; margin-left: 6px; background: #dedede; border-radius: 50px; }

._dummyscreen.loaded { background: #222; }
._dummyscreen.loaded ._header { display: none; }
._dummyscreen.loaded ._btns { display: none; }
._dummyscreen.loaded ._lang { display: none; }

.bold { font-weight: bold; }