.viewer { -ms-touch-action: none; }
.iviewer_common { position: absolute; bottom: 10px; border: 1px  solid #ddd; border-radius: 4px; height: 28px; z-index: 5000; }
.iviewer_cursor { cursor: url(img/hand.cur) 6 8, pointer; }
.iviewer_drag_cursor { cursor: url(img/grab.cur) 6 8, pointer; }
.iviewer_button { width: 28px; cursor: pointer; background-color: #fff; background-position: center center; background-repeat: no-repeat; background-size: 18px; }
.iviewer_zoom_in { left: 20px; background-image: url(img/iviewer.zoom_in.gif); }
.iviewer_zoom_out { left: 55px; background-image: url(img/iviewer.zoom_out.gif); }
.iviewer_zoom_zero { left: 90px; background-image: url(img/iviewer.zoom_zero.gif); }
.iviewer_zoom_fit { left: 125px; background-image: url(img/iviewer.zoom_fit.gif); }
.iviewer_zoom_status { left: 160px; font: 1em/28px Sans; color: #000; background-color: #fff; text-align: center; width: 60px; }
.iviewer_rotate_left { left: 227px; background: #fff url(img/iviewer.rotate_left.png) center center no-repeat; }
.iviewer_rotate_right { left: 262px; background: #fff url(img/iviewer.rotate_right.png) center center no-repeat; }

html, body { height: 100%; padding: 0; margin: 0; background: #f4f4f4; }
.mapbox { width: 100%; height: 500px; position: relative; margin: 0px auto 0; overflow: hidden; }
.wrapper { position: absolute; background: #f4f4f4; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; }
#pointer { background-image: url(arrow.png); width: 40px; height: 40px; position: absolute; display: none; }

.mapinfo { width: 280px; height: 360px; padding: 20px 10px; right: 100px; position: absolute; top: 50px; background: rgba(48, 155, 69, 0.7); border-radius: 10px; z-index: 10; opacity: 0; right: -240px; }
.mapinfo.show { opacity: 1; right: 100px; transition: all linear 400ms; }
.mapinfo .tit { font-size: 20px; font-weight: bold; color: #fff; margin-bottom: 20px; }
.mapinfo .con { max-height: 300px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgb(48, 155, 69) rgba(255,255,255,.3); padding-right: 10px; }
.mapinfo .con::-webkit-scrollbar { width: 3px; }
.mapinfo .con::-webkit-scrollbar-thumb { border-radius: 10px; background: rgb(48, 155, 69); }
.mapinfo .con .img { width: 100%; }
.mapinfo .con .img img { width: 100%; height: 150px; object-fit: cover; }
.mapinfo .con p { font-size: 14px; line-height: 1.5em; color: #fff; margin: 5px 0; text-align: justify; }

.detail_con { margin-bottom: 0; !important; }

@media screen and (max-width: 768px) {
	.mapinfo.show { right: 4%; }
}

@media screen and (max-width: 460px) {
	.mapinfo { width: 92%; box-sizing: border-box; height: 80%; top: 10%; }
	.mapinfo.show { right: 4%; }
}