@charset "utf-8"; .map_wrap, .map_wrap * { margin: 0; padding: 0; } .map_wrap { position: relative; width: 100%; } #daumRoughmapContainer1667549819932 { width: 100%; height: 480px; position: relative; overflow: hidden; } @media all and (max-width:600px) { #daumRoughmapContainer1667549819932 { height: 330px; } } #category { position: absolute; top: 10px; left: 10px; border-radius: 5px; border: 1px solid #909090; /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); */ background: #fff; overflow: hidden; z-index: 2; } #category li { float: left; list-style: none; width: 50px; border-right: 1px solid #acacac; padding: 6px 0; text-align: center; cursor: pointer; font-size: 14px; } #category li.on { background: #eee; } #category li:hover { background: #ffe6e6; border-left: 1px solid #acacac; margin-left: -1px; } #category li:last-child { margin-right: 0; border-right: 0; } #category li span { display: block; margin: 0 auto 3px; width: 27px; height: 28px; } #category li .category_bg { background: url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_category.png) no-repeat; } #category li .bank { background-position: -10px 0; } #category li .mart { background-position: -10px -36px; } #category li .pharmacy { background-position: -10px -72px; } #category li .oil { background-position: -10px -108px; } #category li .cafe { background-position: -10px -144px; } #category li .store { background-position: -10px -180px; } #category li.on .category_bg { background-position-x: -46px; } @media all and (max-width:600px) { #category { top: 0; left: 0px; } #category li { font-size: 12px; width: 43px; border-right: 0; float: unset; border-bottom: 1px solid #acacac; padding: 3px 0; } #category li.on {} #category li:hover { margin-left: 0; border-left: 0; } #category li:last-child { border-bottom: 0; } #category li span { width: 22px; } #category li .category_bg {} #category li .bank {} #category li .mart {} #category li .pharmacy {} #category li .oil {} #category li .cafe {} #category li .store {} #category li.on .category_bg {} } #category2 { position: absolute; top: 75px; left: 10px; border-radius: 5px; border: 1px solid #909090; background: #fff; overflow: hidden; z-index: 2; } #category2 li { float: left; font-size: 14px; list-style: none; line-height: 16px; border-right: 1px solid #acacac; padding: 6px 10px 6px 28px; position: relative; } #category2 li::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 7px; position: absolute; top:7px; left: 10px; } #category2 li.category2_01::before { border: 2px solid red; background: red; } #category2 li.category2_02::before { border: 2px solid blue; background: blue; } #category2 li.category2_03::before { border: 2px solid blue; background: #fff; } @media all and (max-width:600px) { #category2 {top: 305px; left: unset; right: 1px;} #category2 li { float: left; font-size: 13px; list-style: none; line-height: 16px; border-right: 1px solid #acacac; padding: 4px 6px 4px 22px; position: relative; } #category2 li::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 7px; top:6px; left: 6px; } } .placeinfo_wrap { position: absolute; bottom: 28px; left: -150px; width: 300px; } .placeinfo { position: relative; width: 100%; border-radius: 6px; border: 1px solid #ccc; border-bottom: 2px solid #ddd; padding-bottom: 10px; background: #fff; } .placeinfo:nth-of-type(n) { border: 0; box-shadow: 0px 1px 2px #888; } .placeinfo_wrap .after { content: ''; position: relative; margin-left: -12px; left: 50%; width: 22px; height: 12px; background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png') } .placeinfo a, .placeinfo a:hover, .placeinfo a:active { color: #fff; text-decoration: none; } .placeinfo a, .placeinfo span { display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .placeinfo span { margin: 5px 5px 0 5px; cursor: default; font-size: 13px; } .placeinfo .title { font-weight: bold; font-size: 14px; border-radius: 6px 6px 0 0; margin: -1px -1px 0 -1px; padding: 10px; color: #fff; background: #d95050; background: #d95050 url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png) no-repeat right 14px center; } .placeinfo .tel { color: #0f7833; } .placeinfo .jibun { color: #999; font-size: 11px; margin-top: 0; } .label { margin-bottom: 96px; } .label * { display: inline-block; vertical-align: top; } .label .left { background: url("https://t1.daumcdn.net/localimg/localimages/07/2011/map/storeview/tip_l.png") no-repeat; display: inline-block; height: 24px; overflow: hidden; vertical-align: top; width: 7px; } .label .center { background: url(https://t1.daumcdn.net/localimg/localimages/07/2011/map/storeview/tip_bg.png) repeat-x; display: inline-block; height: 24px; font-size: 12px; line-height: 24px; } .label .right { background: url("https://t1.daumcdn.net/localimg/localimages/07/2011/map/storeview/tip_r.png") -1px 0 no-repeat; display: inline-block; height: 24px; overflow: hidden; width: 6px; }