@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button,img,iframe,legend,input,textarea,button,select{margin:0; padding:0}
body,h1,h2,h3,h4,h5,th,input,textarea,button{font-family: 'Roboto', 'Noto Sans KR', sans-serif; color:#222; font-weight: normal; font-size: 16px}
body{*word-break:break-all;-ms-word-break:break-all}
li{list-style:none}
img,fieldset,form{border:0 none}
input,select,button{vertical-align:middle}
button{cursor:pointer;}
a{color:#5f5f68;text-decoration:none;}
a:hover{outline:none}
a:focus{outline:none}
input:focus{outline:none}
a img{border:0 none}
hr{display:none}
table{border-collapse:collapse;border-spacing:0}
form {border:0 none; background:none; margin:0; padding:0}
legend {display:none}
img, video{max-width:100%; height:auto}
video{min-width:100%}
div,img,table {vertical-align: middle}

/* layout */
html, body {height: 100%}
.mapwrap {width: 100%; height: 100%; background: url(../images/mapbg.png) 50% 50%; background-size: cover;}
.header {width: 100%; height: 60px; background: #2B2B2B; position: absolute; z-index: 1}
.opennavbtn {width: 50px; height: 60px; display: block; border: none; position: absolute; top: 0; left: 0;
    background: url(../images/btn_more.svg) 50% 50% no-repeat; background-size: 40%; text-indent: -9999px;  cursor: pointer}
.mylocation {width: 50px; height: 60px; display: block; border: none; position: absolute; top: 0; right: 0;
    background: url(../images/btn_myloca.svg) 50% 50% no-repeat; background-size: 40%; text-indent: -9999px;  cursor: pointer}
.searchbox {position: relative; width: calc(100% - 110px); width: -moz-calc(100% - 110px); width: -webkit-calc(100% - 110px); margin-left: 55px}
.searchinput {width: 100%; line-height: 50px; border: none; color: #FFF; margin-top: 5px; background: none}
.searchinput::placeholder {color: #999}
.searchbox input[type=text]:-ms-clear {display: none;}
.searchclear {width: 40px; height: 50px; display: block; position: absolute; right: 3px; top: 5px; cursor: pointer; background: url(../images/btn_closew.svg) 80% 50% no-repeat; background-size: 33%; text-indent: -9999px}
.sidenav {height: 100%; width: 250px; position: fixed; z-index: 100; top: 0; left: -1px; background-color: #FFF; overflow-x: hidden; transition: 0.3s; padding-top: 30px; margin-left: -250px; border-right: 1px solid #ddd}
.sidenav a {transition: 0.3s}
.sidenav .closebtn {position: absolute; top: 0; right: 0; margin-left: 50px; background: url(../images/btn_close.svg) 50% 50% no-repeat; background-size: 30%; text-indent: -9999px; display: block; width: 50px; height: 50px}
.sidenav .title {background: url(../images/ico_maskb.svg) no-repeat 20px 7px; background-size: 30px; height: 60px; text-indent: 60px; font-size: 19px; font-weight: bold; transition: 0.5s;}
.sidenav .configmap {width: 210px; margin: 0 0 0 20px}
.sidenav .configmap .configtitle {font-size: 12px; color: #777; height: 30px}
.sidenav .configmap .ul {text-align: center; font-size: 12px}
.sidenav .configmap .ul li {width: 30%; display: inline-block; margin: 0 5px 0 0}
.sidenav .notice {padding: 30px 20px 20px 20px; border-top: 1px solid #ddd; margin-top: 30px}
.sidenav .notice li {padding: 0 0 8px 10px; position: relative; font-size: 12px; color: #666; line-height: 1.4}
.sidenav .notice li::before {content: ""; display: block; position: absolute; top: 7px; left: 0; width: 5px; height: 5px; border-radius: 100%; background: #53C2F0}
.quickmenu {position: absolute; bottom: 80px; right: 10px}
.quickmenu .button {width: 55px; height: 55px; margin-top: 10px; cursor: pointer;}

/* map icon sample */
.sampleicon {text-align: center; padding: 100px 0 0 0}
.sampleicon img {padding: 0 10px}
.locicon {max-width: 60px}

/* sale & buy information */
.sale_info {padding: 20px; position: relative;}
.sale_info .store {font-size: 18px; height: 40px; font-weight: bold; width: 70%}
.sale_info .address {font-size: 15px; width: 70%; height: 50px; line-height: 1.3; color: #777}
.sale_info .inventory {background-repeat: no-repeat; line-height: 26px; text-indent: 26px; font-size: 18px;}
.sale_info .inventory.empty {background-image: url(../images/inventory_mask_empty.svg)}
.sale_info .inventory.few {background-image: url(../images/inventory_mask_few.svg)}
.sale_info .inventory.some {background-image: url(../images/inventory_mask_some.svg)}
.sale_info .inventory.plenty {background-image: url(../images/inventory_mask_plenty.svg)}
.sale_info .inventory .amount {font-weight: 500; padding: 0 1px 0 5px}
.sale_info .inventory.empty .amount {}
.sale_info .inventory.few .amount {color: #FE6600}
.sale_info .inventory.some .amount {color: #FFB100}
.sale_info .inventory.plenty .amount {color: #61D001}
.sale_info .utilbtn {position: absolute; top: 80px; right: 20px; font-size: 0}
.sale_info .utilbtn .button {width: 55px; height: 55px; display: inline-block; cursor: pointer; margin: 0 0 0 10px}
.sale_info .utilbtn .share {}
.sale_info .utilbtn .bookmark {}
.buy_info {padding: 15px 20px 20px 20px; position: relative;}
.buy_info .title {font-size: 17px; height: 41px; border-bottom: 1px solid #ddd}
.buy_info .title .subj {font-weight: bold;}
.buy_info .title .number {font-weight: bold; color: #FE6600; font-size: 19px}
.buy_info .title .tip {font-size: 14px; color: #777}
.buy_info .buyinfo_desc {overflow-y: auto; height: auto; padding: 20px 0}

/* layer */
#saleinfo {height: 0; bottom: -1px; left: -1px; z-index: 2;}
#buyinfo {height: 55px; bottom: -2px; left: -1px; z-index: 1;}
#bookmark {height: 0; bottom: -1px; left: -1px; z-index: 2; overflow: scroll;}
#bookmark .sale_info {border-bottom: 1px solid #ddd}
#bookmark .closebtn {position: fixed; top: 2%; display: none}
.bottomlayer {width: 100%; position: fixed; background: #FFF; border-radius: 15px 15px 0 0; border: 1px solid #ccc; transition: 0.3s}
.bottomlayer .closebtn {position: absolute; top: 0; right: 0; display: block; width: 50px; height: 50px; z-index: 1; background: url(../images/btn_close.svg) 50% 50% no-repeat; background-size: 30%; text-indent: -9999px}
.bottomlayer .upbtn, .bottomlayer .downbtn {position: absolute; top: 0; right: 0; display: block; width: 50px; height: 50px; z-index: 1; text-indent: -9999px}
.bottomlayer .upbtn {background: url(../images/btn_up.svg) 40% 55% no-repeat; background-size: 35%}
.bottomlayer .downbtn {background: url(../images/btn_down.svg) 40% 55% no-repeat; background-size: 35%; display: none}

/* 2020.03.14 수정 및 추가 */
.stico {width: 51px; height: 62px; display: inline-block; cursor: pointer}
.stico.mask {background-size: 100%; background-repeat: no-repeat;}
.stico.mask.empty {background-image: url(../images/stico_mask_empty.png); width: 42px; height: 52px}
.stico.mask.few {background-image: url(../images/stico_mask_few.png)}
.stico.mask.some {background-image: url(../images/stico_mask_some.png)}
.stico.mask.plenty {background-image: url(../images/stico_mask_plenty.png)}
.stico.mask.empty.bookmark {background-image: url(../images/stico_mask_empty_bookmark.png); width: 51px; height: 62px;}
.stico.mask.few.bookmark {background-image: url(../images/stico_mask_few_bookmark.png)}
.stico.mask.some.bookmark {background-image: url(../images/stico_mask_some_bookmark.png)}
.stico.mask.plenty.bookmark {background-image: url(../images/stico_mask_plenty_bookmark.png)}

.legend_mask {width: 285px; height: 82px; position: absolute; bottom: 131px; right: 59px; background: url(../images/legend_bg.png); background-size: cover}
.legend_mask ul {margin: 15px 0 0 13px}
.legend_mask li {margin-right: 4px; width: 60px; height: 57px; float: left; cursor: pointer; }
.legend_mask .empty, .legend_mask .few, .legend_mask .some, .legend_mask .plenty {background-size: contain; text-indent: -9999px; background-repeat: no-repeat; background-position: 50% 50%}
.legend_mask .empty.on {background-image: url(../images/legend_empty.png);}
.legend_mask .few.on {background-image: url(../images/legend_few.png);}
.legend_mask .some.on {background-image: url(../images/legend_some.png);}
.legend_mask .plenty.on {background-image: url(../images/legend_plenty.png);}
.legend_mask .empty.off {background-image: url(../images/legend_empty_off.png);}
.legend_mask .few.off {background-image: url(../images/legend_few_off.png);}
.legend_mask .some.off {background-image: url(../images/legend_some_off.png);}
.legend_mask .plenty.off {background-image: url(../images/legend_plenty_off.png);}

.button.reload {width: 40px; height: 40px; background: url(../images/btn_reload.png) no-repeat; background-size: contain; position: absolute; bottom: 80px; left: 10px; text-indent: -9999px;  cursor: pointer}

/* main */
#main {}
#main .mapwrap {width: 100%; height: 100%; background: url(../images/mapbg1.png) 50% 50%; background-size: cover;}
#main .quickmenu, #main .button.reload {bottom: 40px;}


@media screen and (max-width: 768px) {
    #main .mapwrap {background: url(../images/mapbg1.png) 27% 70%; background-size: 500%;}
}

/* modal */
.modal {position:fixed; width:100%; height:100%; padding-top: 180px; top:0; left:0; bottom:0; background-color:rgba(0,0,0,.5); z-index: 999}
.modal.on {opacity:1; z-index:999;}
.modal .modal-content {background-color: #fff; margin: auto; border: 1px solid #888; min-height: 200px; border-radius: 5px; max-width: 500px; width: 80%}
.modal .close {background: url(../img/common/ic_close.svg) 50% 50% no-repeat; width: 50px; height: 50px; cursor: pointer; float: right; text-indent: -9999px; background-size: 21px}
.modal .ttl {font-size: 17px; line-height: 48px; height: 48px; border-bottom: 1px solid #eee; font-family:'Roboto','NanumSquare',sans-serif; font-weight: bold;}
.modal .ttl span:first-child {padding: 0 0 0 25px;}
.modal .cntbox {padding: 30px}
















.test {}