@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 !important;
}

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; 
}

#vr-content { position: relative; height: 100%; opacity:0; }

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

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

#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(0,0,0,.8); width: 100%; line-height: 50px; overflow: hidden; 
}
#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 20px; font-weight: bold;
}
#header .artist .logo img { max-height: 40px; width: auto;  }
#header .artist .logo span { display: inline-block; cursor: pointer; font-size: 18px; color: #fff;  }

#header .artist .exhibit { 
	display: table-cell; height: 100%; 
	vertical-align: middle; 
	color: #f8f8f8; line-height: 16px;
	font-size: .8em;
}
#header .artist .exhibit .tsn { font-weight: bold; font-size: 1em; padding: 3px 0;}
#header .artist .exhibit .tsd { font-size: .9em; color: #999; }

#header .artist .split {
	width: 12px;
	height: 100%;
	background: url(../img/split.png) no-repeat 0 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; 
	padding: 0;
}
#header .artist .title { font-size: 16px; color: #b6b6b6; }

#header .artist .subtitle { font-size: 12px; color: #888; letter-spacing: -0.5px; margin-top: 2px; }
#header .artist .exhibit_place {  }


#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: 14px; display: table; overflow: hidden; float: right; /*background: rgba(83,135,97,0.6);  */}
#gnb .type { 
	display: table-cell; 
	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;
	min-width: 120px;
}
#gnb .type .title  { cursor: pointer; overflow: hidden;  text-overflow: ellipsis; white-space:nowrap; padding: 0 10px; box-sizing: border-box; }
#gnb .type:hover,
#gnb .type.on { color: #f8f8f8; }
#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; 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: #f8f8f8; background: #111; background: rgba(0,0,0,0.1); border-color: rgba(0,0,0,0.1); 
}

#gnb .type.dual { width: 200px; }
#gnb .type.dual .title { width: 200px; }
#gnb .type.dual .place { 
	border-right: 1px solid rgba(0,0,0,0.1);
}
#gnb .type.dual .place.w2 { 
	position: relative; top: -238px; left: 100px; 
}

#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: 12px;
	text-shadow: 1px 1px 2px #000;
	opacity: 0.8;
}

#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: 4100; 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(0,0,0,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; }




.pannel-share { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); color: #333; }
.pannel-share .group { max-width: 90%; width: 380px; border-radius: 7px; overflow: hidden;}

.pannel-share .title {  user-select: none;font-size: 16px; background: #333; margin: 0; display: table; padding: 15px; color: #fff; font-weight: bold; }
.pannel-share .title .text { display: table-cell; width: 99%; }
.pannel-share .title .close { display:table-cell; width: 1%; cursor:pointer; }
.pannel-share .title:after { clear:both}

.pannel-share .content-group { background: #f8f8f8;  padding: 25px; }
.pannel-share .content-group .desc { text-align: center; margin-bottom: 15px; user-select: none;}

.input-group { display: table; margin: 5px; }
.input-group input:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group input, .input-group-button {

    display: table-cell;
}
.input-group input {

   width: 100%;
   position: relative;
}
.input-group input[type=text] {
    min-height: 34px;
    padding: 7px 8px;
    font-size: 13px;
    color: #333;
    vertical-align: middle;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: right 8px center;
    border: 1px solid #ccc;
    border-radius: 3px;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
    box-sizing: border-box;
}

.input-group-button {
    width: 1%;
    vertical-align: middle;
}
.input-group-button:last-child .btn { margin-left: -3px; }
.input-group-button .btn {
    height: 34px !important;
    padding: 7px 8px !important;
    position: relative;
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px !important;
    color: #333;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-color: #eee;
    background-image: linear-gradient(#fcfcfc,#eee);
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}














.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 .tsn { letter-spacing: -1px;}
.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 { 
	border-left: 1px solid rgba(83,135,97,1);
	display: block;
	width: 100%; 
	text-align: center; 
	height: 100%; 
	transition: background-color 0.8s, color 0.8s;
	background: url(../img/dot.png) 0 18px no-repeat;
	color: #bbb;
}
.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; }

.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(0,0,0,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 .bgm-controller { 
	position: fixed;
	width: 0;
	height: 0;
	overflow: hidden;
	display: none;
}
*/


.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; }




#video-window { position: absolute; left:0; top:0; width: 100%; height: 100%; z-index: 5000; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center;}
#video-window .group { width: 100%; }
#video-window .video-container { position: relative; width: 720px; height: 480px; max-width: 90%; margin: auto; background: #333; }
#video-window .video-container .video-iframe { margin:auto;  width: 100% ;height: 100%; background: #333; }
#video-window .video-container .close { 
	position: absolute; 
	top: -58px; 
	width: 48px; height: 48px; 
	font-size: 48px; 
	text-align: center; 
	left: 50%; 
	margin-left: -48px; 
	font-weight: bold;
	z-index: 5000;
	text-align: center;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	cursor: pointer;
}



.bgm-controller { 
	position: absolute; 
	bottom: 64px; left: 50%;  
	width: 48px; 
	margin-left: -24px;
	border-radius: 5px;
	z-index: 4002;
	align-items: center;
	justify-items: center;
	pointer-events: none;
	display: none;
}

.bgm-controller .icon { width:48px; height: 48px; position:relative; margin: auto; }
.bgm-controller .icon i { 
	width: 48px; height: 48px; 
	display: block;
	text-align: center; 
	background: #fff; border-radius: 64px; 
	line-height: 48px;
	font-size: 32px;
	z-index: 5; 
	position: relative;
	color: #666;
	pointer-events: auto;
	cursor: pointer;
	transition: color 0.4s ease;
}
.bgm-controller .icon i:hover { color: #ccc; }

.bgm-controller .icon i.off { display: none; background: #333; }

.bgm-controller.off .icon i.on { display: none; }
.bgm-controller.off .icon i.off { display: block; }

.bgm-controller .icon ul { position: absolute; left:0; top: 0; width: 48px; height: 48px; z-index: 4; }
.bgm-controller .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);
}

.bgm-controller .icon ul li:first-child {
    animation-delay: 0;
}

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

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

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

.bgm-controller .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;
    }
}


.bgm-controller .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;
	*/
}
.bgm-controller .text .insert { height: 100px; overflow-y: auto; padding-right: 10px; }

.bgm-controller .text p { margin: 5px 0; padding: 0;}

.bgm-controller .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;
}
.bgm-controller .close i { display: table-cell; vertical-align: middle;}

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

}
.bgm-controller .audio audio { display: none; }