@charset "utf-8";

.body-container { clear: both; height: -webkit-calc(100% - 122px); height: calc(100% - 122px); }
.body-container .content-wrap { height: 100%; }
.body-container .content-wrap .content-area { height: 100%; padding: 0; }

.map-layout-wrap { position: relative; width: 100%; height: 100%; border-top: 1px solid #dee3eb; z-index: 5; }
.map-layout-wrap .list-area { position: absolute; top: 0; left: 0; width: 400px; height: 100%; background: #fff; border-right: 1px solid #dee3eb; z-index: 20; -webkit-transition: top .3s; -o-transition: top .3s; transition: top .3s; }
.map-layout-wrap .list-area .top { position: relative; padding: 15px; }
.map-layout-wrap .list-area .mo-title { display: block;text-align: center; width: 100%; }
.map-layout-wrap .list-area .mo-title span { position: relative; display: inline-block; margin: 10px 0 20px; font-size: 2.3rem; }
.map-layout-wrap .list-area .mo-title span:after { content: ''; display: inline-block; position: absolute; bottom: 0; left: -3px; width: -webkit-calc(100% + 10px); width: calc(100% + 10px); height: 10px; border-radius: 10px; background: rgba(0,107,214,0.2); }
.map-layout-wrap .list-detail-area {overflow-y: auto; position: absolute; top: 0; left: 0; width: 400px; height: 100%; background: #fff; border-right: 1px solid #dee3eb; z-index: 10; -webkit-transition: left .5s; -o-transition: left .5s; transition: left .5s; -webkit-box-shadow: 5px 5px 8px rgba(0,0,0,0.1); box-shadow: 5px 5px 8px rgba(0,0,0,0.1); }
.map-layout-wrap .list-detail-area.on { left: 400px; }
.map-layout-wrap .map-area { position: relative; width: 100%; padding-left: 400px; height: 100%; background: url(../../../img/sub/map/map-sample.png) no-repeat right; }
.map-layout-wrap .map-area img { width: 100%; height: 100%; }
.map-layout-wrap .map-area .search-wrap { display: none; }

.paging ul li { width: 21px; height: 21px; line-height: 21px; }
.paging ul li.arrow a { background: #fff; border: 0;}

.layer-pop-wrap .layer-box .body .guide-video { width: 560px; height: 315px; }

/* 사진 디테일 레이어팝업 */
.layer-pop-wrap.img-pop-wrap .layer-box { width: 50%; }
.layer-pop-wrap.img-pop-wrap .layer-box .body .photo-view { width: 100%; height: 355px; clear: both; position: relative; margin: 0 auto; text-align: center; }
.layer-pop-wrap.img-pop-wrap .layer-box .body .photo-view .view img { max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.layer-pop-wrap.img-pop-wrap .layer-box .body .photo-list { position: relative; height: 120px; overflow: hidden; margin: 15px 70px; z-index: 20; }
.layer-pop-wrap.img-pop-wrap .layer-box .body .photo-list ul { overflow-x: auto; overflow-y: hidden; white-space: nowrap; height: 140px; }
.layer-pop-wrap.img-pop-wrap .layer-box .body .photo-list ul li { display: inline-block; position: relative; width: 25%; height: 100%; overflow: hidden; background: #fff; }
.layer-pop-wrap.img-pop-wrap .layer-box .body .photo-list ul li img { min-width: 100%; max-width: 120%; min-height: 100%; position: absolute; top: 50%; left: 50%; cursor: pointer; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; -o-transition: -o-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s, -o-transform .3s; }
.layer-pop-wrap.img-pop-wrap .layer-box .body .photo-list ul li img:hover { -webkit-transform: translate(-50%,-50%) scale(1.1); -ms-transform: translate(-50%,-50%) scale(1.1); -o-transform: translate(-50%,-50%) scale(1.1); transform: translate(-50%,-50%) scale(1.1); }
.layer-pop-wrap.img-pop-wrap .layer-box .body .control { position: absolute; bottom: 60px; left: 50%; width: 95%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; }
.layer-pop-wrap.img-pop-wrap .layer-box .body .control .btn { font-size: 4rem; opacity: .2; cursor: pointer; }
.layer-pop-wrap.img-pop-wrap .layer-box .body .control .btn:hover { opacity: .35; }
.layer-pop-wrap.img-pop-wrap .layer-box .body .control .btn.prev { float: left; }
.layer-pop-wrap.img-pop-wrap .layer-box .body .control .btn.next { float: right; }

@media all and (max-width: 1024px) {
	.layer-pop-wrap .layer-box .body .guide-video { width: 100%;}
}

@media all and (max-width: 768px) {
	.body-container { height: 100%; }
	.map-layout-wrap .list-area { width: 330px; }
	.map-layout-wrap .map-area { padding-left: 330px; }
	.map-layout-wrap .list-detail-area { width: 330px; }
	.map-layout-wrap .list-detail-area.on { left: 330px; }
	.layer-pop-wrap.img-pop-wrap .layer-box .body .photo-list { margin: 15px 40px; }

	.paging ul li:first-child, .paging ul li:last-child { display: none; }
}

@media all and (max-width: 600px) {
	.header-container { position: fixed; top: 0; left: 0; z-index: 90; }
	.body-container { position: fixed; top: 76px; left: 0; overflow: hidden; }

	.map-layout-wrap .map-area { padding: 0; height: 51%; position: fixed; top: 76px; left: 0; }
	.map-layout-wrap .map-area .search-wrap { display: block; position: absolute; top: 15px; left: 15px; margin: 0; width: 100%; -webkit-box-shadow: 0 3px 7px rgba(0,0,0,.2); box-shadow: 0 3px 7px rgba(0,0,0,.2);}
	.map-layout-wrap .map-area .search-wrap .search-area .input-box { width: -webkit-calc(100% - 130px); width: calc(100% - 130px); }
	.map-layout-wrap .map-area .search-wrap .search-area .input-box .input[type="text"].text-input { border-radius: 5px 0 0 5px; }
	.map-layout-wrap .list-area { position: fixed; width: 100%; top: auto; -webkit-box-shadow: -10px 0 8px rgba(0,0,0,.2); box-shadow: -10px 0 8px rgba(0,0,0,.2); border-radius: 20px 20px 0 0; padding-top: 0; bottom:0; height:50%;}
	.map-layout-wrap .list-area .top { padding-top: 30px; }
	/* .map-layout-wrap .handle-area { width: 100%; height: 100px; padding-top: 15px;} */
	.map-layout-wrap .list-area.up { top: 135px; height: calc(100% - 135px);}
	.map-layout-wrap .list-area:after { content: ''; display: block; position: absolute; top: 10px; left: 50%; width: 30px; height: 5px; background: #d0d0d0; margin-left: -15px; }
	.map-layout-wrap .list-area .bottom { clear: both; }
	.map-layout-wrap .list-area .top:after { clear: both; content: ''; display: block; }
	.map-layout-wrap .list-area .top .search-wrap { display: none; }
	.map-layout-wrap .list-area .top .write-wrap .btn-wrap { float: right; }
	.map-layout-wrap .list-area .mo-title { float:left; width: auto;}
	.map-layout-wrap .list-area .mo-title span { margin: 0; margin-left: 7px; font-size: 2rem; }

	.layer-pop-wrap.img-pop-wrap .layer-box { min-width: 95%; }
	.layer-pop-wrap.img-pop-wrap .layer-box .body .control .btn { font-size: 2.5rem; }

}