@charset "UTF-8";

#mapWrap, .wrap, .map {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
z-index: 0;
}

.map{
	background-color: LightGray;
}

#roadviewControl {
	position: absolute;
	top: 50px;
	right: 1%;
	width: 42px;
	height: 42px;
	z-index: 1;
	cursor: pointer;
	background:
		url(https://t1.daumcdn.net/localimg/localimages/07/2018/pc/common/img_search.png)
		0 -450px no-repeat;
}

#roadviewControl.active {
	background-position: 0 -350px;
}

/* 줌 버튼 */
 .ol-zoom {
	left: unset;
	right: 1%;
	top: 100px;
	width: 30px;
	height: 60px;
}

.ol-control button {
	height: 45%;
    width: 90%;
}

/* 스케일바 */
.ol-scale-line{
	left: unset;
	right: 8px;
	bottom: 8px;
}

ul.side {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

/* 지도위에 로드뷰의 위치와 각도를 표시하기 위한 map walker 아이콘의 스타일 */
    .MapWalker {position:absolute;margin:-26px 0 0 -51px; z-index:50}
    .MapWalker .figure {position:absolute;width:25px;left:38px;top:-2px;
        height:39px;background:url(https://t1.daumcdn.net/localimg/localimages/07/2018/pc/roadview_minimap_wk_2018.png) -298px -114px no-repeat}
    .MapWalker .angleBack {width:102px;height:52px;background: url(https://t1.daumcdn.net/localimg/localimages/07/2018/pc/roadview_minimap_wk_2018.png) -834px -2px no-repeat;}
    .MapWalker.m0 .figure {background-position: -298px -114px;}
    .MapWalker.m1 .figure {background-position: -335px -114px;}
    .MapWalker.m2 .figure {background-position: -372px -114px;}
    .MapWalker.m3 .figure {background-position: -409px -114px;}
    .MapWalker.m4 .figure {background-position: -446px -114px;}
    .MapWalker.m5 .figure {background-position: -483px -114px;}
    .MapWalker.m6 .figure {background-position: -520px -114px;}
    .MapWalker.m7 .figure {background-position: -557px -114px;}
    .MapWalker.m8 .figure {background-position: -2px -114px;}
    .MapWalker.m9 .figure {background-position: -39px -114px;}
    .MapWalker.m10 .figure {background-position: -76px -114px;}
    .MapWalker.m11 .figure {background-position: -113px -114px;}
    .MapWalker.m12 .figure {background-position: -150px -114px;}
    .MapWalker.m13 .figure {background-position: -187px -114px;}
    .MapWalker.m14 .figure {background-position: -224px -114px;}
    .MapWalker.m15 .figure {background-position: -261px -114px;}
    .MapWalker.m0 .angleBack {background-position: -834px -2px;}
    .MapWalker.m1 .angleBack {background-position: -938px -2px;}
    .MapWalker.m2 .angleBack {background-position: -1042px -2px;}
    .MapWalker.m3 .angleBack {background-position: -1146px -2px;}
    .MapWalker.m4 .angleBack {background-position: -1250px -2px;}
    .MapWalker.m5 .angleBack {background-position: -1354px -2px;}
    .MapWalker.m6 .angleBack {background-position: -1458px -2px;}
    .MapWalker.m7 .angleBack {background-position: -1562px -2px;}
    .MapWalker.m8 .angleBack {background-position: -2px -2px;}
    .MapWalker.m9 .angleBack {background-position: -106px -2px;}
    .MapWalker.m10 .angleBack {background-position: -210px -2px;}
    .MapWalker.m11 .angleBack {background-position: -314px -2px;}
    .MapWalker.m12 .angleBack {background-position: -418px -2px;}
    .MapWalker.m13 .angleBack {background-position: -522px -2px;}
    .MapWalker.m14 .angleBack {background-position: -626px -2px;}
    .MapWalker.m15 .angleBack {background-position: -730px -2px;}
    
/* 로드뷰 클로저 */
.btn_close:hover {
    background-color: rgba(0,0,0,0.9);
}

.btn_close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 38px;
    height: 38px;
    border-radius: 19px;
    background-color: rgba(0,0,0,0.7);
    z-index:100;
    display: none;
}


.btn_kakao
{
    position: absolute;
    top: 100px;
    right: 15px;
    font-size: 1.5rem;
    /*width: 38px;
    height: 38px;
    border-radius: 19px;
    background-color: rgba(0,0,0,0.7);*/
    z-index:100;
    display: none;
}

button {
    margin: 0;
    border: 0;
    outline: 0;
    padding: 0;
    cursor: pointer;
    overflow: visible;
    background: 0;
    border-radius: 0;
}

.info_roadview .btn_close:hover {
    background-color: rgba(0,0,0,0.9);
}

button {
    appearance: auto;
    writing-mode: horizontal-tb !important;
    font-style: ;
    font-variant-ligatures: ;
    font-variant-caps: ;
    font-variant-numeric: ;
    font-variant-east-asian: ;
    font-weight: ;
    font-stretch: ;
    font-size: ;
    font-family: ;
    text-rendering: auto;
    color: buttontext;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    box-sizing: border-box;
    background-color: buttonface;
    margin: 0em;
    padding: 1px 6px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonborder;
    border-image: initial;
}

.btn_close .ico_roadview2 {
    width: 14px;
    height: 14px;
    margin-top: 2px;
    background-position: -60px -40px;
}

.ico_roadview2 {
    display: inline-block;
    vertical-align: top;
    background: url(//t1.daumcdn.net/localimg/localimages/07/2018/pc/roadview/ico_roadview22x_190625.png) no-repeat;
    background-size: 200px auto;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}

.btn_close .tooltip_btn {
    display: none;
    position: absolute;
    z-index: 10;
    top: 9px;
    right: 43px;
    height: 21px;
    padding: 1px 8px 0;
    border-radius: 12px;
    color: #222;
    word-break: keep-all;
    white-space: nowrap;
    background-color: #fff;
    box-sizing: border-box;
}
    
/*우측 마우스 클릭 이벤트 메뉴 꾸미기 */
.contextMenu {
    cursor: pointer;
    background-color: #eee;
    position: absolute;
    border: solid 1px black;
    width: 160px;
}
.contextMenu .menuItem {
    padding: 5px;
    font-size: 1.5em;
}
.contextMenu .menuItem:hover {
    background-color: #ccc;
}

.menuSeparator {
    border-bottom: solid 1px black;	
}

/* 주소 팝업 CSS */
      .ol-popup {
      	user-select: text;
        position: absolute;
        background-color: white;
        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
        min-width: 300px;
        font-size: 1.5em;
        z-index: 210;
      }
      .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
      }
      .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
      }
      .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
      }
      .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
      }
      .ol-popup-closer:after {
        content: "✖";
      }
/* 주소 팝업 CSS */

#gpstrack {
	all: unset;
	position: absolute;
    display: block;
    background-image: url(/img/gpstrack-stop.svg);
    color: green;
    width: 40px;
    height: 40px;
 
	right: 10px;
	bottom: 120px;
	z-index: 40;
	background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 30%;
}

#gpstrack:hover{
	background-color: rgba(255,255,255,0.6);
	
}

#gpstrack:checked{
	background-image: url(/img/gpstrack-start.svg);
	background-color: yellow;	
	animation-name: gpsAnimation;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

@keyframes gpsAnimation{
  from{
    transform: scale(1);
    opacity: 1;
  }

  to{
    transform: scale(1);
    opacity: 0.5;
  }
}


.grayscale {
  filter: grayScale(100%);
}

#roadView {
	z-index: 50;
	width: 100%;
	height: 100%;
	display: none;
	position: relative;
}

#mapWrap .handle {
   width: 10px;
   height: 10px;
   background-color: #000;
   position: absolute;
   right: 0;
   top: 0;
   cursor: ne-resize;
   z-index: 110;
   visibility: hidden;
}

/*
html{
  
     -ms-user-select: none;
     -moz-user-select: -moz-none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     user-select: none;
}
*/