@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; width:100%; z-index: 2010}
header .logo {float:left; padding:12px 24px; background:rgba(255,255,255,0.8); position: relative;}
header .logo:after {content:''; position:absolute; left:0; top:80px; border-top:35px solid rgba(255,255,255,0.8);
  border-right:127px solid transparent; border-bottom:0px solid transparent; border-left:127px solid transparent;} 
header .logo img {max-width:100%}
header .m_logo {display:none}
header .menu_wrap {position:relative; float:right; background-color: rgba(139, 0, 49, 0.8); height:80px;}
.menu {float:right; height:80px; }
nav, nav li {display:inline-block; margin:0}
nav li a {display:inline-block; padding:0 20px; height:80px; line-height:80px; color:#fff; font-size:17px; transition:height 0.5s}
nav li a:hover {height:100px; background:#616365; color:#ffcd29 !important }

@media (max-width: 880px) {
  header .m_logo {display:block}
  header .logo:after {border:none}
  header .logo img:first-child{display:none}
  header .logo {background:none; padding:10px}
  nav li a {padding:0 10px; font-size:15px; letter-spacing:-0.05em}
}

/* 현재 장소명 */
.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:38%; transform:translateX(-50%); display:table; bottom:5px;}

.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; float:left; margin-left:20px;}
.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 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 #000}
.pop_tit {color:#8b0028; 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:#8b0028; 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:60px; 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:#8b0028;}
.tab_con2 span {display:block; width:140px; line-height:1.4; padding-top:5px; color:#8b0028;}

@media (max-width: 840px) {
  .popup > section {margin:0 5%; width:90%}
  .pop_tit {width:100%; font-size:24px}
  .tab {width:25%}
  .tab_con {width:85%}
  .tab li {font-size:16px; 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:14px; 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}