@charset "utf-8";

* {padding: 0; margin: 0;box-sizing:border-box;}
html, body {width: 100%; height: 100%; overflow: hidden; font-family: 'Spoqa Han Sans', sans-serif; font-weight: 400; letter-spacing: -.05px;}
ul, ol, li {list-style: none;}
a {text-decoration: none;}
img {border: 0; user-select: none;}

::selection {background: #129a80;}
#document {padding-right:273px;width: 100vw;height: 100vh;position: relative;width: 100vw;height: 100vh;background:#000;}
#side{position: absolute;top:0;right: 0;width: 273px;height: 100vh;background-color:#363d3c;box-shadow: 0 0 15px rgb(0 0 0 / 15%);z-index: 2;}
#side h1{background-color:#03866D;display:block;padding:23px;padding-left: 73px;color:#fff;font-size: 18px;position:relative;vertical-align: middle;line-height: 43px;}
#side h1:before{content:'';display:inline-block;width:35px;height:35px;background: url(../image/ir-info.png) no-repeat;position: absolute;top: 26px;left: 27px;}
#side_nav{width:100%;height:100%;/* padding: 23px; */}
#side_nav > li{display:block;border-bottom:1px solid  rgba(255,255,255,0.1)}
#side_nav > li strong{font-family: 'score-dream-extrabold';display: block;padding: 26px 32px;font-size:25px;color:#0BC19E;position:relative;}
#side_nav > li ul{}
#side_nav > li ul li{display:block;;border-top:1px solid rgba(255,255,255,0.1)}
#side_nav > li ul li:focus{
  border-bottom: 1px solid red;
}
#side_nav > li ul li.on{background-color:#2b3130}
#side_nav > li ul li a{color:#fff;padding:18px 43px;display: block;font-size:17px;position:relative;font-weight: bold;}
#side_nav > li ul li a:before{content:'';position:absolute;top: 29px;left: 30px;width:5px;height:5px;border-radius:50%;background-color:#5e6463;}
#side_nav > li ul li.on a{color:#0BC19E}
#side_nav > li ul li.on a:before{background-color:#0BC19E;}


#pano_wrap {position: absolute;width: calc(100% - 270px);height: 100%;top: 0;left: 0;background-color: rgba(0,0,0,1);z-index: 9;}
#pano {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.pano_guide {position: absolute; display: inline-block; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;}
.pano_guide img {display: block;}
.pano_guide img.guide_mobile{display: none;}
#btnAllmenu{display:none;position: absolute;right: 20px;top: 20px;width: 50px;height: 41px;z-index:0;font-size: 0;padding:10px;background-color:#fff}
#btnAllmenu [class*="bar"]{display: block;width: calc(100% - 20px);height: 3px;background:#0aad8e;position: absolute;left: 0;border-radius: 16%;}
#btnAllmenu .bar1{top: 10px;width: calc(80% - 20px);margin-left: 40%;}
#btnAllmenu .bar2{left: 20%;top: 19px;}
#btnAllmenu .bar3{top: 28px;width: calc(70% - 20px);margin-left: 50%;}

h1#logo {position:absolute;left:20px;top:18px;width:301px;height:62px;font-size:0;background: url(../image/logo_black.png) no-repeat;background-size:100% auto;z-index: 11;}
h1#logo a{display:block;width:100%;height:100%;}
#side_wrap {display: block;position:absolute;width: 432px;height: 100%;top: 0;right: 270px;padding:78px 49px;background-color: #fff;z-index: 10;box-sizing: border-box;text-align: left;border-radius: 10px 0px 0px 10px;}
#side_wrap.close {display: none;right: -682px;}
#side_wrap .side_toggle{display:block;position:absolute;top: 10px;right: 20px;height:50px;width: 50px;font-size: 0;}
#side_wrap .side_toggle:before,
#side_wrap .side_toggle:after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
#side_wrap .side_toggle:before {width:80%;height: 2px;background: #333;transform: rotate(45deg);-webkit-transform: rotate(45deg);}
#side_wrap .side_toggle:after {width: 2px;height:80%;background:#333;transform: rotate(45deg);-webkit-transform: rotate(45deg);}
#side_wrap .place_title{margin-bottom: 10px;}
#side_wrap .place_title strong{display:block;vertical-align:middle}
#side_wrap .place_title strong span{font-size:27px;color:#03866D;font-family: 'score-dream-extrabold';}
#side_wrap .place_title strong em{font-size:15px;color:#919191;font-family: 'score-dream-light';}
#side_wrap .place_title .info{font-size:16px;color:#282828;font-family: 'score-dream';line-height: 1.2;display: block;}
#side_wrap .place_info {display: none;width: 100%;padding:5px 0;font-size: 16px;color: #2d2d2d;/* white-space: nowrap; */line-height: 1.4;clear:both}
#side_wrap .place_info:after{display:block;visibility:hidden;clear:both;content:""}
#side_wrap .place_info.has_con {display: block;}
#side_wrap .place_info.place_picture{height:202px;background-color:#000;background-size: 100%;background-repeat: no-repeat;background-position: 50%;}
#side_wrap .place_info.place_description{line-height:1.4;margin: 10px 0;}
#side_wrap:focus{
  outline: auto;
}

#side_wrap .place_info.place_link{text-align:center;margin-top:55px;}
#side_wrap .place_info.place_link span{display:inline-block;}
#side_wrap .place_info.place_link span a{display:block;padding: 12px 43px;border:1px solid #363d3c;font-size:16px;color:#363d3c;font-family: 'score-dream-extrabold';border-radius: 30px;}

#side_wrap .place_info.place_video{
    margin-top: 20px;
}
#side_wrap .place_info.place_video span{display:inline-block;width: 50%;position:relative;float: left;margin-bottom: 5px;padding-right: 4px;}
#side_wrap .place_info.place_video span a{display:block;width:100%;height:100%;padding-top: 10px;padding-left: 101px;position:relative;min-height:59px;font-size: 14px;line-height: 1.2;color: #606060;}
#side_wrap .place_info.place_video span a:focus {outline:1px solid #000;}
#side_wrap .place_info.place_video span a i{width:90px;height:59px;position:absolute;top:0;left:0;border:4px solid #e1e1e1;box-sizing: border-box;overflow: hidden;}
#side_wrap .place_info.place_video span a i img{width: 100%;line-height:1;}
#side_wrap .place_info.place_video span a.on{color:#11977e}
#side_wrap .place_info.place_video span a.on i{border:4px solid #11977e;}

#side_wrap .place_info.place_audio{
    margin-top: 20px;
}
#side_wrap .place_info.place_audio span{display:inline-block;width: 50%;position:relative;float: left;margin-bottom: 5px;padding-right: 4px;}
#side_wrap .place_info.place_audio span a{display:block;width:100%;height:100%;padding-top: 10px;padding-left:42px;position:relative;min-height: 33px;font-size: 14px;line-height: 1.2;color: #606060;}
#side_wrap .place_info.place_audio span a:focus{outline:1px solid #000;}
#side_wrap .place_info.place_audio span a:before{content:'';position:absolute;top:0;left:0;width:33px;height:33px;background: url(../image/icon.png) no-repeat;}
#side_wrap .place_info.place_audio span a.on{color:#11977e}
#side_wrap .place_info.place_audio span a.on:before{background-position:-35px 0}



.stit{font-size:21px;color:#282828;margin-bottom:10px;font-family: 'score-dream-extrabold';display: block;}
.stit *{font-style:normal}
.stit i{color:#03866D}

.place_description .stit{display:none}
[data-index="0"] .place_description .stit,
[data-index="1"] .place_description .stit,
[data-index="2"] .place_description .stit{display:block}




#pop_inner {
	position: fixed; top: 50%; left: 50%;width:calc(100% - 60px); height:calc(100% - 60px);z-index: -1; visibility: hidden;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
}
#pop_inner.active {z-index: 255; visibility: visible;}
#pop_inner:before {
	position: fixed; display: block; content: ""; top: 50%; left: 50%; width: 200%; height: 200%; background-color: rgba(0,0,0,.5); box-shadow: 5px 5px 11px rgba(0,0,0,.1);
	transform:translate(-50%,-50%);
		-webkit-transform:translate(-50%,-50%);
}
#pop_inner .closer {position: absolute;display: block;top: -51px;right: -51px;width: 102px;height:  102px;border-radius: 50%;background:url('../image/icn_close.png') no-repeat center;z-index: 10;font-size: 0px;}
#pop_inner .closer:focus {outline:3px solid #fff;}
#pop_inner [data-inner-type] {position: absolute;top: 50%;left: 50%;z-index:5;/* width: 100%; *//* height: 100%; */margin-left: -315px;margin-top: -211px;width: 633px;min-height: 292px;background-color: #fff;border-radius: 10px;}
#pop_inner [data-inner-type=video] {margin-left: -665px;margin-top: -315px;width: 1102px;min-height: 620px;}
#pop_inner [data-inner-type] #video {width: 100%; height: 100%;padding:10px;}
#pop_inner [data-inner-type] #video video{width:100%}


#pop_inner [data-inner-type] #audio {width: 100%;height: 100%;padding: 0;}
#pop_inner [data-inner-type] #audio audio{width:100%;height:54px;}



.holder {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 15px 25px;
  border-bottom: 1px solid #ddd;
  align-content: space-around;
  position: relative;
  padding-left: 221px;
}
.holder .title{background: none;position:absolute;top: 20px;left: 20px;color: #282828;font-size: 28px;font-family: 'score-dream-extrabold';}
.holder .get-it-on-github {
  margin-top: 24px;
  margin-bottom: 24px;
  font-family: "Roboto";
  color: #55606E;
}

.audio.green-audio-player {
  width: 100%;
  /* min-width: 300px; */
  height: 24px;
  /* box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07); */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
  user-select: none;
  -webkit-user-select: none;
  background-color: #fff;
  float: right;
}
.audio.green-audio-player .play-pause-btn {
  display: none;
  cursor: pointer;
  border: 1px solid #566574;
  width:31px;
  height:31px;
  position:relative;
  border-radius:50%;
  margin-top: -4px;
}
.audio.green-audio-player .play-pause-btn svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:15px;height:15px;}



.audio.green-audio-player .spinner {
  width: 18px;
  height: 18px;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/loading.png);
  background-size: cover;
  background-repeat: no-repeat;
  animation: spin 0.4s linear infinite;
}
.audio.green-audio-player .slider {
  flex-grow: 1;
  background-color: #D8D8D8;
  cursor: pointer;
  position: relative;
}
.audio.green-audio-player .slider .progress {
  background-color: #44BFA3;
  border-radius: inherit;
  position: absolute;
  pointer-events: none;
}
.audio.green-audio-player .slider .progress .pin {
  height: 12px;
  width: 12px;
  border-radius: 8px;
  background-color: #fff;
  position: absolute;
  pointer-events: all;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);
  border:1px solid #ddd
}
.audio.green-audio-player .controls {
  /* font-family: "Roboto", sans-serif; */
  font-size: 14px;
  line-height: 18px;
  color: #55606E;
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  margin-left: 9px;
  margin-right: 3px;
  font-family: 'score-dream';
}
.audio.green-audio-player .controls .slider {
  margin-left: 6px;
  margin-right: 6px;
  border-radius: 5px;
  height: 4px;
}
.audio.green-audio-player .controls .slider .progress {
  width: 0;
  height: 100%;
}
.audio.green-audio-player .controls .slider .progress .pin {
  right: -8px;
  top: -6px;
}
.audio.green-audio-player .controls span {
  cursor: default;
  font-family: 'score-dream-extrabold';
}
.audio.green-audio-player .volume {
  position: relative;
  display: none;
}
.audio.green-audio-player .volume .volume-btn {
  cursor: pointer;
}
.audio.green-audio-player .volume .volume-btn.open path {
  fill: #44BFA3;
}
.audio.green-audio-player .volume .volume-controls {
  width: 30px;
  height: 135px;
  background-color: rgba(0, 0, 0, 0.62);
  border-radius: 7px;
  position: absolute;
  left: -3px;
  bottom: 52px;
  flex-direction: column;
  align-items: center;
  display: flex;
}
.audio.green-audio-player .volume .volume-controls.hidden {
  display: none;
}
.audio.green-audio-player .volume .volume-controls .slider {
  margin-top: 12px;
  margin-bottom: 12px;
  width: 6px;
  border-radius: 3px;
}
.audio.green-audio-player .volume .volume-controls .slider .progress {
  bottom: 0;
  height: 100%;
  width: 6px;
}
.audio.green-audio-player .volume .volume-controls .slider .progress .pin {
  left: -5px;
  top: -8px;
}

svg, img {
  display: block;
}


@keyframes spin {
  from {
    transform: rotateZ(0);
  }
  to {
    transform: rotateZ(1turn);
  }
}



@keyframes bg {
    0% {transform: scale(1.1) rotate(-0.01deg); -webkit-transform: scale(1.1) rotate(-0.01deg);}
    70%,100% {transform: scale(1) rotate(-0.01deg); -webkit-transform: scale(1) rotate(-0.01deg);}}
@-webkit-keyframes bg {
    0% {transform: scale(1.1) rotate(-0.01deg); -webkit-transform: scale(1.1) rotate(-0.01deg);}
    70%,100% {transform: scale(1) rotate(-0.01deg); -webkit-transform: scale(1) rotate(-0.01deg);}}



#intro {position: absolute;top: 0;left: 0;bottom: 0;right: 0;z-index: 999;}
#intro .bg{position:absolute;left:0;top:0;width:100vw;height:100vh;background: url(../image/intro-min.jpg) no-repeat center;background-size: cover;background-size:cover;transform: scale(1.1);-webkit-transform: scale(1.1);animation: bg 12s linear infinite; -webkit-animation: bg 12s linear infinite;animation-direction:alternate}
#intro .bg:before { display: block; content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8);z-index:10 }

#intro .introText { position: absolute; width: 384px; height: 140px; top: 50%; left: 50%; margin-left: -192px; margin-top: -95px; /* background: url(../image/intro_text.png) no-repeat center; */z-index:11}
#intro .copyright { position: absolute; left: 0; right: 0; bottom: 25px; text-align: center; color: rgba(255, 255, 255, 0.8);z-index:11}
.progress { position: absolute; left: 0; right: 0; top: 0; z-index:11}
.progressValue { display: block; background-color: #0aad8e; width: 0%; height: 3px; }

#intro .skip {position: absolute;display: inline-block;color: #fff;left: 50%;top: 61%;transform: translate(-50%, -50%);z-index: 999;font-size: 28px;text-align: center;background-color: transparent;width: 160px;height: 50px;padding: 0px;border: 3px solid #fff;border-radius: 25px;cursor: pointer;}

#video .summry{font-size:0;line-height:0}
#audio .summry{margin: 27px 15px;padding: 15px;height: 210px;/* overflow: hidden; *//* border: 1px solid; */}

.gnbClose{display:none;position:absolute;top: 23px;right:20px;height: 40px;width: 40px;font-size: 0;}
.gnbClose:before,
.gnbClose:after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;border-radius:16%;overflow:hidden}
.gnbClose:before {width:80%;height:3px;background: #fff;transform: rotate(45deg);-webkit-transform: rotate(45deg);}
.gnbClose:after {width: 3px;height:80%;background:#fff;transform: rotate(45deg);-webkit-transform: rotate(45deg);}

	
.gnb_bg{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.2)}

@media screen and (max-width:1199px){
	#document{padding-right:0;}
	#side{display:none;z-index:999}
	#pano_wrap{width:100%;}
	h1#logo{top:10px;left:10px;}
	#btnAllmenu{display:block;z-index:10}
	#side.mb .gnbClose{display:block;}
	#side_wrap{width: 50%;right:0;z-index: 999;padding: 27px 29px;bottom: 0;top: 0;}
	#side_wrap.close{right:-100%}
	.gnb_bg.mb{z-index:99}
  
	#pop_inner [data-inner-type] {top: 10%;left: 5%;margin-left: 0;margin-top: 0;width: 80%; min-height: 292px;}
	#pop_inner [data-inner-type=video] {width: 80%;min-height: auto;margin-left: 0;margin-top: 0;}

}

@media screen and (max-width:767px){
	#pop_inner [data-inner-type] {left: 10%;width: 80%;}
	#pop_inner [data-inner-type=video] {width: 90%;}
	#side_wrap{width:100%;border-radius:0;border-top: 4px solid #129b81;}

}


@media (max-height:918px) {
	#side {overflow-y: scroll;}
}