@charset "utf-8";

@font-face {
    font-family: 'Nanumsquare';
    src: url(./fonts/NanumSquareR.eot);
    src: local('NanumSquareR'), url(./fonts/NanumSquareR.eot?#iefix) format('embedded-opentype'), url(./fonts/NanumSquareR.woff) format('woff'), url(./fonts/NanumSquareR.woff2) format('woff2'), url(./fonts/NanumSquareR.ttf) format('truetype');
}

html, body {
  height: 100%;
  width: 100%;
}
body {
  font-family:'Nanumsquare',sans-serif; -webkit-text-size-adjust: 100%; font-size:15px;
}

a {
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
  color: #002254;
}
/* a:hover, a:focus { text-decoration: underline } */
}
h1, h2, h3, h4, h5, h6 {
  font-family:'Nanumsquare',sans-serif;
}
ul li {list-style:none}
.clearfix:after {content:''; clear:both; display:table}

/* intro */
.intro {width:100%; height:100%; position:absolute; display:table}
.intro:after {content:''; position:absolute; width:100%; z-index:5001; left:0; right:0; top:0; bottom:0; background:rgba(255,255,255,0.8); }
.intro>div {display:table-cell; text-align:center; vertical-align:middle; position:relative; z-index:9999; }
.intro>div p {margin:0 5%}
.intro>div p:first-child {margin-bottom:20px}
.intro>div img {max-width:100%}

/* header */
header {position:absolute; right:0;width:10%; top:20%; z-index: 2010}
header .menu_wrap {position:relative; float:right; background-color: rgba(204, 204, 204, 0.8); min-width: 125px;}
.menu {float:right; }
nav {display:block; margin:0; }
nav li {display:inline-block; margin:0; width:120px;text-align:center; }
nav li a {display:inline-block; padding:0 30px;  width:120px;line-height:55px; color:#fff; font-size:17px; transition:height 0.5s}
nav li a:hover {background-color: rgba(0, 0, 0, 0.7); color:#ffcd29 !important;  }


nav, nav li {display:block; margin:0}
nav li a:hover {background-color: rgba(0, 0, 0, 0.7); color:#ffcd29 !important;  }




@media (max-width: 880px) {
	header {position:absolute; float:right;width:10%; top:30%; z-index: 2010}
	header .menu_wrap {position:relative; float:right; background-color: rgba(204, 204, 204, 0.8); height:500px;}
	nav, nav li {display:block; margin:0; text-align:center; width:100%;}
	nav li a {display:inline-block; padding:0 20px; line-height:55px; color:#fff; font-size:17px; transition:height 0.5s;width:100%;}
	nav li a:hover {background-color: rgba(0, 0, 0, 0.7); color:#ffcd29 !important;  }
}

/* 현재 장소명 */
.place_tit {position:absolute; bottom:0;  text-align:center; width:100%; z-index:5000}
.place_tit span {padding:20px 50px; color:#fff; background:rgba(97,99,101,0.9); font-size:18px; font-weight:normal; display:inline-block; text-shadow:1px 1px 5px #000}
@media (max-width: 768px) {
  .place_tit {width:80%}
  .place_tit span{padding:20px; font-size:18px}

}

/* control icon*/
.control {position:absolute; left:35px; display:table; height:100%}
.control ul {display:table-cell; vertical-align: middle}
.control li {width:50px; height:50px; border-radius:50%; cursor: pointer; background:rgba(255,255,255,0.9); margin-bottom:10px; text-align:center; line-height:65px;  box-shadow:1px 1px 10px #000}
.control_panel {width:50px; height:50px; border-radius:50%; cursor: pointer; background:rgba(97,99,101,0.9); color:#fff; margin-bottom:10px; text-align:center; line-height:68px; }
.control li:hover, .control_panel:hover {background-color:rgba(15, 81, 165, 0.7); color:#fff}
.control li i, .control_panel i {font-size:30px;}
.control li i.xi-play {font-size:40px; line-height:50px; padding-left:3px}
.control_panel {display:none}

@media (max-width: 880px) {
  .control {position:absolute; display:block; bottom:0; right:2%; height:auto}
  .control li {width:35px; height:35px; line-height:42px; margin-bottom:5px}
  .control li i  {font-size:20px}
  .control li i.xi-play {font-size:25px; line-height:38px}
  .control_panel {display:block; width:45px; height:45px; line-height:55px}
  .control_panel i {font-size:25px;}
  .control ul {display:none}
}

/* hotspot 표시 */
.hotspot {position:absolute; padding:12px 25px 12px 40px; border-radius:22px; font-size:18px; color:#fff; background:#000; }
.hotspot:after {content:''; position:absolute; left:50%; margin-left:-10px; bottom:-20px; border-top:10px solid #000;
  border-right:10px solid transparent; border-bottom:10px solid transparent; border-left:10px solid transparent;}
.hotspot i {position:absolute; left:15px; top:9px; font-size:21px}
.airview {background:#01a681; top:11px}
.airview:after {border:none}
.color_organg {background:#f15929}
.color_organg:after {border-top:10px solid #f15929}
.color_blue {background:#3651ad}
.color_blue:after {border-top:10px solid #3651ad}
.color_purple {background:#742c94}
.color_purple:after {border-top:10px solid #742c94}
.color_green {background:#2e933f}
.color_green:after {border-top:10px solid #2e933f}

/*layer popup 공통*/
.popup {width:100%; height:100%; position:absolute; top:0; box-shadow:1px 1px 10px #000; font-size:16px; color:#555}
/*.popup:after {content:''; position: absolute; width: 100%; z-index:5001; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.8); }*/
.popup>section {background:#fff; max-width:800px; max-height:600px; width:100%; position:absolute; z-index:9999; top:120px; left:0; right:0; margin: auto;  box-shadow:1px 1px 10px rgba(0,0,0,0.4);}
.pop_tit {color:#666666; font-size:30px; font-weight:bold; text-align:center; background:#f2f2f2; width:100%; line-height:50px}
.btn_cls {height:50px; width:50px; display:block; position:absolute; right:0; top:0; background:#CCCCCC; color:#fff; font-size:25px; text-align: center; line-height:55px}

/* popup 건물별*/
.tab {width:125px; background:#616365; overflow:hidden; float:left; }
.tab li {text-align:center; box-sizing:border-box; color:#fff; font-size:18px; line-height:1.6; border-bottom:1px solid #818284; cursor:pointer; margin:0}
.tab li {padding:20px; cursor:pointer; }
.tab li.on { background:#fff; color:#000; }
/* .tab_con {float:right; width:692px} */

.tab_con > div { display:none; padding:20px 0; background:#fff; text-align:center; }
.tab_con dl {overflow:hidden; margin-bottom:20px}
.tab_con dt, .tab_con dd {float:left}
.tab_con2 dt, .tab_con2 dd {float:left}
.tab_con dt {width:100px; font-weight:bold; font-size:22px; color:#616365}
.tab_con li {float:left; margin-left:10px}
.tab_con2 li {float:left; margin-left:10px}
.tab_con li:first-child {margin-left:0}
.tab_con li a {display:block; width:140px; height:100px; overflow:hidden}
.tab_con2 li a {display:block; width:140px; height:100px; overflow:hidden}
.tab_con li img {transform:scale(1.0); transition:all 0.4s}
.tab_con li a:hover img {transform:scale(1.3); }

.tab_con span {display:block; width:140px; line-height:1.4; padding-top:5px; color:#666666}
.tab_con2 span {display:block; width:140px; line-height:1.4; padding-top:5px; color:#666666}

@media (max-width: 840px) {
  .popup > section {margin:0 5%; width:90%}
  .pop_tit {width:100%; font-size:24px}
  .tab {width:25%}
  .tab_con {width:100%}
  .tab li {font-size:13px; padding:10px; }
  .tab_con li {width:30%}
  /*.tab_con li:nth-child(4) {clear:both; margin-left:0}*/
  .tab_con li a {width:100%; height:auto;}
  .tab_con dt {width:10%; font-size:16px}
  .tab_con dd {width:90%}
  .tab_con dd span {font-size:12px; width:99%}
}
@media (max-width: 768px) {
  .popup > section {margin:0 5%; width:90%; top:120px;}
  .tab {}
}


.popup img {max-width:100%}
.popup p {color:#666; line-height:1.8}

.pop_tit span {color:#777}
.popup .stxt {font-size:0.9rem; margin-bottom:0}
.popup .fontB {font-weight:bold; color:#000}




/*작가 프로필*/
.popup_profil article >div {display:inline-block; width:59%; vertical-align: top; margin-bottom:0 }
.popup_profil article>div:first-child {width:40%; padding-right:4%}
.popup_profil .pop_tit, .popup_profil .stxt {padding-left:5%}
.popup_profil .history p {line-height:1.6}
@media (max-width: 768px) {
  .popup_profil article>div:first-child, .popup_profil article >div {width:94%}
  .popup_profil .pop_tit, .popup_profil .history {padding-left:0}
}

/*작가평론*/
.popup_crits .stxt {text-align:right; margin-bottom:10px}

/* 작품 팝업 */
.pop_pic>section {max-width:1050px; top:30px}
.pop_pic article {text-align:center; padding:2%}
.pop_pic article div {margin-bottom:0; position:relative}
.pop_pic .pop_tit {text-align:center; padding:0 0 15px; width:70%}
.pop_pic img {max-width:1000px; width:100%}
.pop_pic article div.pic_txt {position:absolute; width:100%; height:100%; top:0; background:rgba(0,0,0,0.7); z-index:999; padding:4%;}
.pop_pic article div.pic_txt p {color:#fff; text-align:left}
.btn_pictxt {height:50px; width:50px; display:block; position:absolute; right:50px; top:0; text-indent:-9999px; background:#329ad0 url('/vr_data/201904/쉐마미술관vtour/vtour/img/ico_info.png') no-repeat; }

/**************** 추가 *****************/

#btn-pmenu {
  display: block;
  position: absolute;
  top: 15px;
  right: 15px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  font-size: 25px;
  z-index: 900;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0px 0px 10px rgba(0,0,0,0.6);
  display: none;
}

#btn-pmenuclose {
  display: block;
  position: absolute;
  top: 15px;
  right: 15px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  font-size: 25px;
  z-index: 900;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0px 0px 10px rgba(0,0,0,0.6);
  display: none;
}