@charset "utf-8";

/*공통*/
html,body{overflow: hidden;overflow-y: auto;width: 100%;}
#totalWrap{overflow:hidden;position:relative;width:100%;height:100%;min-height:0;}
.ntk,.ntk *{font-family:'ntk';letter-spacing:-.05em;}

/* 본고딕 */
.nsr,.nsr *{font-family:'nsr';letter-spacing:-.05em;}

/* 나늠스퀘어 */
#app { width:100%; height:100%; }
.ir{background:url(../img/ir.png) no-repeat;}
.break{display:block;line-height:1;}
.no_txt{font-size:0;line-height:0;}
button{background:none;}
#totalWrap{padding-right:350px;}
#intro{position:relative;z-index: 999;top:0;left:0;width:100%;height:100%;background: url(../img/intro_bg.jpg) no-repeat 42% center;background-size:cover;}
#intro .intro_inner{width:100%;height:100%;text-align:center;}
#intro_logo{width:168px;height:226px;margin-top:110px;background:url(../img/logo.png);}
#intro header{position:absolute;z-index:10;top:50%;left:0;width:100%;margin-top: 0;transform: translateY(-50%);color:#fff;}
#intro header:before{position:absolute;left: 50%;top: -80px;z-index: -1;width:614px;height:406px;margin-left: -320px;background: url(../img/intro_bg.png) no-repeat center;transform-origin: 50% 50%;/* -webkit-animation: text-focus-in 2s cubic-bezier(.55,.085,.68,.53) both; *//* animation: text-focus-in 2s cubic-bezier(.55,.085,.68,.53) both; */content: '';}
#intro header h1{margin-bottom: 150px;font-size:70px;line-height:1;font-family: 'nmj';}
#intro header h1 .logo{display:block;margin:0 auto;margin-bottom:20px;}
#intro header h1 em{display:block;margin-bottom:10px;;font-size:20px;letter-spacing:20px;}
#intro header h1 b{display:block;font-size:85px;font-weight:bold;font-family:'nmj';}
#intro header p{font-size: 18px;line-height: 1.5;}
#intro .scroll_arr{display: inline-block;position: relative;width: 180px;height: 50px;margin: 30px auto 0;padding-left: 75px;background: #50362a;font-size: 17px;color: #fff;text-align: left;}
#intro .scroll_arr:before{position:absolute;left: -13px;top:50%;width:67px;height:1px;background:#fff;content:'';}

@-webkit-keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0;}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}
@-webkit-keyframes mask-play {
    from {
        -webkit-mask-position: 0% 0;
        mask-position: 0% 0;
    }
    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}

@keyframes mask-play {
    from {
        -webkit-mask-position: 0% 0;
        mask-position: 0% 0;
    }
    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}


#header{transition: 0.3s ease-in-out;overflow:hidden;position:absolute;z-index: 1000;top:0;right:0;width:350px;height:100%;background: #50362a;box-shadow:2px 0 10px rgba(0,0,0,.2);}
#header .scroll{position: relative;height:100%;}
#logo{width: 234px;height: 167px;margin-top:50px;margin-left:50px;background: url(../img/logo.png) no-repeat;}
#logo a{display:block;width:100%;height:100%;}
#search_btn2{position:absolute;top: 190px;right: 50px;width:30px;height:30px;background:url(../img/icon_search_2.png) no-repeat center;}

/* 메뉴 */
#gnb .dept1{margin-top:35px;}
#gnb .dept1 > li{border-bottom: 1px solid #735e55;}
#gnb .dept1 > li.btn_1{border-top:1px solid #3377b1;}
#gnb .dept1 > li > button{width:100%;height:105px;padding-left: 40px;color:#fff;font-size:25px;text-align:left;}
#gnb .dept1 > li > button.active {background: #8a6e4b;color: #fff;}
#gnb .dept1 .icon{display:inline-block;width: 40px;height: 40px;margin-right: 20px;background-repeat:no-repeat;background-position:center;background-size: 100%;vertical-align:middle;}
#gnb .dept1 .icon_all{background-image:url(../img/all_icon.png);}
#gnb .dept1 .icon_01{background-image:url(../img/cate1_icon.png);}
#gnb .dept1 .icon_02{background-image:url(../img/cate2_icon.png);}
#gnb .dept1 .icon_03{background-image:url(../img/cate3_icon.png);}
#gnb .dept1 .icon_04{background-image:url(../img/cate4_icon.png);}
#gnb .dept1 .icon_05{background-image:url(../img/cate5_icon.png);}
#gnb .dept2{display: none;padding: 15px 60px;background: url(../img/gnb_dept2.png);}
#gnb .dept2 > li > button{transition:0.25s ease-in-out;display:block;position:relative;width: 100%;height:50px;margin:0 auto;padding-left: 45px;color: #000;font-size: 14px;text-align:left;}
#gnb .dept2 > li > button em{display: block;position: absolute;left: 0;width: 33px;height: 28px;background:url(../img/bul.png);font-size:14px;color: #50362a;text-align: center;line-height: 28px;font-weight: bold;}
#gnb .dept2 > li > button:after{display:block;position:absolute;bottom:0;left:0;width:0;height:2px;background:#fff;content:'';transition:width .5s;}
#gnb .dept2 > li > button.on em{background:url(../img/bul_b.png);background-size: 100%;color:#fff;}
#gnb .dept2 > li.on > button:after{width:100%;}
#gnb .dept2 > li.on .apbt{color:#fff;background:#f24d0b;}
#gnb .dept2 .apbt{display:inline-block;width:22px;height:22px;margin-right:10px;color:#4d4d4d;border-radius:11px;background:#fff;font-size:13px;font-weight:bold;line-height:22px;text-align:center;vertical-align:middle;}


/* 인포창 */
#info{/* display: block; */position:absolute;z-index:10;transition:0.25s ease-in-out;top:0;right: 350px;width: 490px;height:100%;margin-right: -519px;background:url(../../tour/img/info_bg.png);background-size: cover;box-shadow:2px 0 10px rgba(0,0,0,.2);}
body.show_info #info { margin-right:0; }
#info .scroll{height:100%;}
#info .info_inner{padding: 0 50px;}
#info .thumb{width:366px;margin:0 auto;padding-top: 60px;}
#info .thumb img { width:100%;}
#info .title{overflow:hidden;margin-top:30px;margin-bottom:15px;line-height: 1.2;font-size:25px;}
#info .title span:before{display:block;float:left;width: 39px;height: 43px;margin-top:0;margin-right:10px;color:#fff;background:url(../img/marker.png)center top -5px no-repeat;background-size: 100%;font-size:13px;line-height:25px;text-align:center;content:'';}
#info .content{margin-top: 30px;/* padding:0 15px; */color:#5f5f5f;font-size:14px;}
#info dl{overflow:hidden;margin-top:40px;padding:20px 15px;color:#5f5f5f;border-top:1px solid #ccc;font-size:14px;}
#info dt{float:left;width:80px;font-weight:bold;}
#info dd{float:left;width:256px;}
#info .detail_link{display:block;width:100%;height:55px;margin-top:50px;margin-bottom:10px;color:#fff;background:#f24d0b;font-size:15px;font-weight:bold;line-height:55px;text-align:center;}
#info .button_wrap{overflow:hidden;margin-top: 80px;padding-bottom:50px;}
#info .button_wrap button,#info .button_wrap a{transition:0.25s ease-in-out;display:inline-block;width: 32.5%;vertical-align:middle;text-align:center;line-height:50px;margin-bottom:1%;height:50px;color: #50362a;border: 2px solid #50362a;font-size:14px;font-weight:bold;}
#info_close {width: 26px;height: 104px;position:absolute;top: 80px;left: -25px;background:url(../img/close.png) no-repeat center;}
#info .button_wrap a[target=_blank] span { transition:background 0.25s ease-in-out; background:url(../img/link.png) no-repeat right center; padding:0 20px; }
#info .button_wrap button:hover, #info .button_wrap a:hover {background: #50362a;color:#fff;}
#info .button_wrap a[target=_blank]:hover span {background:url(../img/link_w.png) no-repeat right center;}

#mediaCnt{position:absolute;top:0;right:0;width:100%;height:100%;padding-right: 350px;z-index: 999;}
#vrPano{position:relative;width:100%;height:100%;}
#pano{width:100%;height:100%;}
#mouse_notice{position:absolute;top:50%;left:50%;width:300px;height:300px;margin-top:-150px;margin-left:-150px;background:url(../img/mouse.png) no-repeat center;}
#control{position:absolute;top:50%;left:50px;height:330px;transform:translateY(-50%);}
#control .slider_wrap{position:absolute;top:83px;left:22px;width:7px;padding:40px 0;background:#1975c3;}
#slider{position:relative;width:7px;height:140px;background:#1975c3;}
#slider span{display:block;position:absolute;width:32px;height:32px;margin-bottom:-16px;margin-left:-12px;outline:0;background:url(../img/grip.png);}
#fs_btn{display:block;width:54px;height:54px;background:url(../img/fs_btn.png);}
#zoomIn_btn{display:block;position:absolute;top:54px;width:54px;height:54px;background:url(../img/plus_btn.png);}
#zoomOut_btn{display:block;position:absolute;top:278px;width:54px;height:54px;background:url(../img/minus_btn.png);}
#krpanoSWFObject *{box-sizing:content-box;}
#pano-close{display:block;position:absolute;top:20px;right:20px;width:54px;height:54px;border-radius:27px;background: url(../img/pano-x.png);background-size: 100%;box-shadow:2px 2px 5px rgba(0,0,0,.2);}
#youtubeWrap{line-height: 100vh;vertical-align: middle;width:100%;height:100%;position: relative;background:#000;text-align: center;}
#youtubeWrap iframe { width:100%; height:100%; border:0; }
#youtube-close{display:block;position:absolute;top:20px;right:20px;width:54px;height:54px;border-radius:27px;background: url(../img/pano-x.png) no-repeat center;background-size: 100%;box-shadow:2px 2px 5px rgba(0,0,0,.2);}
#imagesWrap {width:100%;height:100%;position: relative;background:#fff;}
#images-close{display:block;z-index: 10;position:absolute;top:20px;right:20px;width:54px;height:54px;border-radius:27px;background: url(../img/pano-x.png) no-repeat center;background-size: 100%;box-shadow:2px 2px 5px rgba(0,0,0,.2);}
#images_list { width:100%; height:100%; position: relative; }
#images_list .image_item { width:100%; height:100%; position:absolute;background-position: center;background-size: 100% auto;background-repeat: no-repeat; opacity: 0; transition:0.3s ease-in-out; }
#images_list .image_item.active { z-index:10; opacity: 1;}
#slide_thumb_wrap {z-index:20;position: absolute;left: 0;right: 0;bottom: 0;height: 190px;background: rgba(0,0,0,.75);}
#slide_thumb_wrap .title{position:absolute;left:55px;top: 50%;color:#fff;transform: translateY(-50%);}
#slide_thumb_wrap .title strong{display:block;font-size:30px;font-family:'nmj';font-weight:bold}
#slide_thumb_wrap .title span{display:block;font-size:20px;}
#slide_prev,#slide_next  {position: absolute;width:28px;height:52px;top:50%;margin-top:-26px;}
#slide_prev {background:url(../img/ctr_prev.png) no-repeat center;position: absolute;left: 390px;}
#slide_next { background:url(../img/ctr_next.png) no-repeat center; position: absolute; right: 50px;}
#slide_thumb {overflow: hidden;height: 125px;position: absolute;left: 450px;right: 110px;top: 50%;margin:0 auto;margin-top: -63px;}
.thumb_li {position: absolute;width: 200px;height: 125px;margin-right: 20px;}
.thumb_a { display: block;width: 100%;height: 100%;}
.thumb_li.active {border:3px solid #fff;}

.main_map_area {display: block;position: relative;width: 100%;height: 100%;background-color: #f0f0f1;}
.pan_guide {display: none;position: fixed;border: 0;z-index: 4;top: 50%;left: 50%;width: 50px;height: 50px;border-radius: 50px;background: #fff;box-shadow: -1px 1px 10px grey;transform: translate(-50%, -50%);box-sizing: border-box;}
.swipe_icon {position: absolute; top: 12px; left: 9px; width: 25px; height: 25px; overflow: visible; animation: hand-move 3s ease-out infinite;}

@keyframes hand-move {
    0% {transform: translate(0,0)}
    50% {transform: translate(15px,0)}
    100% {transform: translate(0,0)}
}

.main_map_area .title{position:absolute;left:80px;top:85px;z-index:9;}
.main_map_area .title em{display:block;font-size:15px;color:#aaa}
.main_map_area .title p{font-size:24px;color:#777}
.main_map_area .title strong{display:block;font-size:42px;font-family:'nmj';color:#2a327f;}
#map3d { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; }
#map3d > div {margin-top: 100px;background-size: 100%;}
#map3d .marker_box{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
#map3d .marker_box button{overflow: hidden;position:absolute;width:53px;height:68px;}
#map3d .marker_box button.ov,
#map3d .marker_box button:hover{overflow:visible}
#map3d .marker_box button .marker_wrap{position:absolute;left: 50%;bottom: 39px;width:200px;height:0;z-index: 10;padding-top: 195px;transform: translateX(-50%);transition:all .5s;}
#map3d .marker_box button.ov .marker_wrap,
#map3d .marker_box button:hover .marker_wrap{height:260px}
#map3d .marker_box button.ov .marker_wrap:before,
#map3d .marker_box button:hover .marker_wrap:before{position:absolute;left:0;top:0;z-index: 1;width:200px;height:260px;background:url(../img/marker_on_bg.png);content:'';}
#map3d .marker_box button:after {display:block;position: relative;z-index: 9;width: 53px;height: 57px;padding-top: 11px;text-align: center;font-size: 16px;letter-spacing: -1px;color: #fff;line-height: 100%;background-image: url(../img/marker.png);background-repeat: no-repeat;cursor: pointer;content:'';}
#map3d .marker-image{display:none;}
#map3d button.ov .marker-image,
#map3d button:hover .marker-image{display:block;position: absolute;top: 40px;left: 0;right: 0;z-index: 0;z-index: 0;overflow: hidden;}
#map3d button .marker-image img{display: block;height: 150px; width: auto; max-width: none;position: relative;left:50%;transform: translate(-50%,0);}
#map3d .marker_text{display: none;position: relative;z-index: 99;left: 0;color: #3d4145;line-height: 1.2;font-size: 16px;opacity: 0;transition: all .5s;}
#map3d button.ov .marker_text,
#map3d button:hover .marker_text{display:block;opacity: 1;transition-timing-function: ease-in-out;}

#map3d.map01 .marker_box #main-marker_1{top: 73%;left: 58%;}
#map3d.map01 .marker_box #main-marker_2{top: 51%;left: 64%;}
#map3d.map01 .marker_box #main-marker_3{left: 64.4%;top: 29%;}
#map3d.map01 .marker_box #main-marker_4{left: 48%;top: 42%;}
#map3d.map01 .marker_box #main-marker_5{left: 37%;top: 44%;}
#map3d.map01 .marker_box #main-marker_6{left: 47%;top: 49%;}
#map3d.map01 .marker_box #main-marker_7{left: 60.5%;top: 16%;}
#map3d.map01 .marker_box #main-marker_8{left: 55.5%;top: 13%;}
#map3d.map01 .marker_box #main-marker_9{left: 56.7%;top: 10%;}
#map3d.map01 .marker_box #main-marker_10{left: 36%;top: 15%;}
#map3d.map01 .marker_box #main-marker_11{left: 44%;top: 30%;}
#map3d.map01 .marker_box #main-marker_12{left: 71.5%;top: 70.5%;}
#map3d.map01 .marker_box #main-marker_13{left: 52%;top: 30%;}
#map3d.map01 .marker_box #main-marker_14{left: 47.5%;top: 63.5%;}
#map3d.map01 .marker_box #main-marker_15{left: 73%;top: 40%;}

#map3d.map01 .marker_box #main-marker_9{left: 54.5%;top: 5%;}
#map3d.map01 .marker_box #main-marker_10{left: 36%;top: 15%;}
#map3d.map01 .marker_box #main-marker_11{left: 44%;top: 30%;}
#map3d.map01 .marker_box #main-marker_12{left: 71.5%;top: 70.5%;}
#map3d.map01 .marker_box #main-marker_13{left: 52%;top: 30%;}
#map3d.map01 .marker_box #main-marker_8{left: 55.5%;top: 13%;}
#map3d.map01 .marker_box #main-marker_9{left: 54.5%;top: 5%;}
#map3d.map01 .marker_box #main-marker_10{left: 36%;top: 15%;}
#map3d.map01 .marker_box #main-marker_11{left: 44%;top: 30%;}
#map3d.map01 .marker_box #main-marker_12{left: 71.5%;top: 70.5%;}
#map3d.map01 .marker_box #main-marker_13{left: 52%;top: 30%;}

#map3d.map02 .marker_box #main-marker_1{top:34%;left:48%}
#map3d.map02 .marker_box #main-marker_2{top:25%;left:61%}
#map3d.map02 .marker_box #main-marker_3{top:20%;left:34%}

#map3d.map03 .marker_box #main-marker_1{top:18%;left:33%}
#map3d.map03 .marker_box #main-marker_2{top:18%;left:48%}
#map3d.map03 .marker_box #main-marker_3{top:30%;left:85%}

#map { position: absolute; width: 100%; height: 100%; background: #fff; }
.main_map_area .top_bt_wrap {display:none;}
#map3d.map01 .top_bt_wrap {display:block;}
.main_map_area .top_bt_wrap button {position:absolute;width: 92px;height: 92px;box-sizing: border-box;border-radius: 92px;font-size: 15px;color: #fff;text-align: center;transition: background 0.2s;}
.main_map_area .top_bt_wrap button:nth-child(1){left: 49%;top: 77%;}
.main_map_area .top_bt_wrap button:nth-child(2){display: none !important;}
.main_map_area .top_bt_wrap button:nth-child(3){display: none !important;}
.main_map_area .top_bt_wrap button:nth-child(4){left: 48%;top: 25%;}
.main_map_area .top_bt_wrap button:nth-child(5){left: 40%;top: 22%;}
.main_map_area .top_bt_wrap button:nth-child(6){left: 55%;top: 20%;}
.main_map_area .top_bt_wrap button:nth-child(7){left: 55%;top: 35%;}
.main_map_area .top_bt_wrap button:nth-child(8){left: 23%;top: 14%;}
.main_map_area .top_bt_wrap button:nth-child(9){left: 62%;top: 4%;}


#main #main-3dmap #sky_view {display: block;position: absolute;bottom: 34px;right: 94px;width: 122px;height: 122px;border-radius: 61px;}
.main_map_area .top_bt_wrap button {display: block !important;overflow: hidden;z-index: 9;margin: 12px auto 0;width: 68px;height: 68px;background: url(../img/skyvr.png);text-align: center;font-size: 0;}
.main_map_area .top_bt_wrap button span {display: inline-block;position: relative;padding-top: 56px;width: 100%;height: 100%;font-size: 15px;color: #fff;text-align: center;}
.main_map_area .top_bt_wrap button span:before{position:absolute;top: 24px;left:50%;width: 48px;height: 24px;background-image: url(../img/icon_skyview.png);margin-left:-24px;content:'';}
.main_map_area .top_bt_wrap button:hover span:before{-webkit-animation: slide-in-blurred-bl 1.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;animation: slide-in-blurred-bl 1.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}
.main_map_area .top_bt_wrap button {}
.main_map_area .top_bt_wrap button:hover { background-color: #15589e; }
.main_map_area .bt_map {background: #3073b8 url(../img/sc_2.png) no-repeat center 20px;margin-right: 15px;}
.main_map_area .bt_map:hover { background-color: #132f66; }
.main_map_area .map_img { width: 100%; height: auto; }

@media (max-width:1200px){
    #logo{display:block;margin: 27px 0 0 30px;background-size: 212px;}

    #gnb .dept1{margin-top:0;}
    #gnb .dept1 > li > button{height: 61px;padding-left: 20px;font-size:17px;}
    #gnb .dept1 .icon{width:32px;height:32px;margin-right: 15px;}
    #gnb .dept2{padding: 15px 30px;}
    #gnb .dept2 > li > button{height:40px}
    #gnb .dept2 > li > button em{width:28px;height:24px;background-size:100%;}
}
@media (max-width:1048px){
    .main_map_area{overflow:auto;-ms-overflow-style: none;scrollbar-width: none;}
    .main_map_area::-webkit-scrollbar {display: none;}
    #map3d{min-width: 1148px;height: 720px;}
    .show_info .main_map_area{height: calc(100% - 500px);}
}
@media (max-width:980px){
    #totalWrap{padding:0;}
    #header{width:300px;}
    #m-top{height:59px;background:#0f2564;}
    #m-title{position: absolute;left: 20px;top: 50%;width:140px;height:24px;background: url(../img/m_logo.png) no-repeat center;font-size: 0;transform: translateY(-50%);}

    #mediaCnt{padding: 59px 0 0;}
    body.show_info #info{display:block;bottom: 0;top: auto;right: 0;z-index: 19;width: 100%;max-height: 500px;padding-top: 20px;}
    #info .info_inner{padding:0 20px}
    #info .title{height: auto;font-size:18px;line-height: 1.2;}
    #info .title span:before{width:25px}
    #info .content{margin-top:0px;font-size: 12px;}
    #info .scroll{overflow-y:auto;}
    #info .thumb {width: 100%;margin-top: 0;padding-top: 0;}
    #info .button_wrap{margin-top:20px;}
    #info_close{top: -65px;left: 50%;transform: rotate(90deg);}
    #slide_thumb_wrap .title{position:relative;left: 50px;top: 20px;transform: translate(0px, 0px);}
    #slide_thumb_wrap .title strong{font-size:20px;}
    #slide_thumb_wrap .title span{font-size:15px;}
    #slide_thumb {margin-top: 0px;left: 55px;right: 55px;height: 60px;}
    .thumb_li {width: 95px;height: 60px;margin-right: 10px;}
    #slide_prev {left: 10px;background-size: 50% auto;}
    #slide_next {right: 10px;background-size: 50% auto;}
    #slide_prev,
    #slide_next {width: 30px;height: 30px;margin-top: 15px;}
    .main_map_area .title{left:20px;top:90px;}
    .main_map_area .title em{font-size:8px;}
    .main_map_area .title strong{font-size:23px;}
    .main_map_area .title p{font-size:15px;}
    .pan_guide {display: block;}
}
@media (max-width:767px){
    #intro header:before{width:435px;height:353px;background-size:100%;margin-left:-217.5px;}
    #intro header h1{margin-bottom: 130px !important;font-size: 50px !important;}
    #intro header h1 .logo{width: 55px !important;}
    #intro header h1 em{font-size:14px;letter-spacing: 13px;}
    #intro header h1 b{font-size:60px;}
    #intro header p{font-size: 18px !important;letter-spacing: -0.1em;}
}