@charset "utf-8"; .bg { background-image: url("../../images/img_map/background.png"); /* Full height */ width: 2500px; height: 1406px; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; } .store { background-image: url("../../images/img_map/store.png"); /* Full height */ width: 2500px; height: 1406px; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; } .store>img { width: 2500px; } .public { background-image: url("../../images/img_map/public.png"); /* Full height */ width: 2500px; height: 1406px; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; } .photozone { background-image: url("../../images/img_map/photozone.png"); background-color: unset; /* Full height */ width: 2500px; height: 1406px; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; z-index: 0; } .parking { background-image: url("../../images/img_map/parking.png"); /* Full height */ width: 2500px; height: 1406px; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; } .cultural { background-image: url("../../images/img_map/cultural.png"); /* Full height */ width: 2500px; height: 1406px; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; } @media screen and (max-width: 1440px) { .btn_qbox { right: 40px; } } @media screen and (max-width: 1024px) { .btn_qbox { right: 20px; } } @media screen and (max-width: 640px) {} /*mapWrap*/ #mapWrap { position: relative; width: 100%; /* height: calc(100% - 202px); */ height: calc(100vh - 140px); /* margin-top: 116px; */ overflow: scroll; } .btnWrap { position: relative; display: block; z-index: 90; } .btnWrap .download { position: absolute; top: 15px; right: 25px; } .btnWrap .download a { display: block; width: 116.5px; padding: 10px 0; font-size: 18px; line-height: 19px; color: #000; text-align: center; background-color: #fff; border: 1px solid #ddd; border-radius: 5px; float: left; margin-left: 5px; } .btnWrap .download a:nth-child(3) { padding: 19px 0; } .btnWrap .download a:hover { background-color: #05bda1; color: #fff; border: 1px solid #05bda1; } .btnWrap .dropdown { width: 100%; position: absolute; display: inline-block; right: 25px; top: 100px; } .btnWrap .dropdown .button { position: absolute; right: 0; top: 0; padding: 20px 40px; font-size: 20px; background-color: #fff; border: 1px solid #ddd; border-radius: 5px; } .btnWrap .dropdown .button:hover { background-color: #05bda1; color: #fff; border: #05bda1; } #drop-content { position: absolute; right: 127px; top: 0; z-index: 1; background: #fff; padding: 0 10px; border: 1px solid #ddd; border-radius: 5px; } #drop-content a { display: inline-block; font-size: 14px; color: black; padding: 10px; } #drop-content a span { text-align: center; display: block; } #drop-content p { width: 40px; height: 40px; border: 1px solid #ddd; background: #fff; margin-bottom: 5px; border-radius: 50%; position: relative; } #drop-content p.ov { /* background: #05bda1; */ /* border: 0px; */ } #drop-content i { position: absolute; background-image: url(../../images/sub/ico.png); width: 32px; height: 29px; overflow: hidden; text-indent: 0; white-space: unset; left: 0; } #drop-content .ov i.ico1 { background-position: 9px 10px; } #drop-content .ov i.ico2 { background-position: -22px 9px; } #drop-content .ov i.ico3 { background-position: -54px 8px; } #drop-content .ov i.ico4 { background-position: -82px 8px; } #drop-content .ov i.ico5 { background-position: -113px 8px; } #drop-content .ov i.ico6 { background-position: -176px 9px; } #drop-content .ov i.ico7 { background-position: -207px 8px; } #drop-content i.ico1 { background-position: 9px -22px; } #drop-content i.ico2 { background-position: -22px -22px; } #drop-content i.ico3 { background-position: -54px -22px; } #drop-content i.ico4 { background-position: -82px -22px; } #drop-content i.ico5 { background-position: -113px -22px; } #drop-content i.ico6 { background-position: -176px -22px; } #drop-content i.ico7 { background-position: -207px -22px; } @media all and (max-width: 1024px) { #mapWrap { /* margin-top: 84px; */ height: calc(100vh - 186px); } .btnWrap .download { top: 5px; right: 5px; } .btnWrap .download a { font-size: 16px; line-height: 16px; width: 100px; padding: 10px 0; } .btnWrap .download a:nth-child(3) { padding: 15.5px 0; } .btnWrap .dropdown { top: 75px; right: 5px; } .btnWrap .dropdown .button { font-size: 16px; line-height: 16px; width: 100px; padding: 15px; } #drop-content { right: 105px; } } @media all and (max-width: 600px) { #mapWrap { /* margin-top: 59px; */ height: calc(100vh - 161px); } .btnWrap .download br:nth-child(1), .btnWrap .dropdown br { display: none; } .btnWrap .download { width: 100%; right: 0px; padding-left: 3px; top: 5px; } .btnWrap .download a { width: calc(33% - 4px); margin: 2px; } .btnWrap .download a:nth-child(3) { padding: 10px 0; } .btnWrap .download a:nth-child(3) br { display: block; } .btnWrap .dropdown { width: 100%; top: 66px; right: 6px; } .btnWrap .dropdown .button { width: calc(34% - 10px); padding: 15px 0; } #drop-content { right: calc(34% - 5px); top: -54px; padding: 14px 8px; margin-left: 10px; } #drop-content a { padding: 5px; width: 55px; } } .zoom { display: none; } @media all and (max-width: 600px) { .zoom { position: absolute; display: inline-block; right: 30px; top: 300px; width: 50px; } .zoom .button { background: #fff; border: 1px solid #ddd; border-radius: 5px; padding: 15px; margin: 3px 0; } } /*pop*/ #divpop { position: absolute; left: 15px; top: 200px; z-index: 200; visibility: hidden; } #divpop .popbody { position: relative; background: #fff; padding: 30px 20px 10px 20px; border-radius: 10px; } #divpop .popbody h2 { color: #000; font-size: 25px; margin-bottom: 15px; font-weight: 700; } #divpop .popbody .cont ul { margin-top: 15px; } #divpop .popbody .cont ul li { border-bottom: 1px solid #ddd; padding: 10px 5px; } #divpop .popbody .cont ul li:last-child { border: 0; } #divpop .popbody .cont ul li span { display: inline-block; width: 70px; color: #000; font-weight: 600; } #divpop .popbody .close { position: absolute; right: 15px; top: 15px; }