@charset "utf-8";


/* shoplist
=====================*/

.overlay { z-index:2; }

.shoplist { width:100%; height:calc(100vh - var(--fullheaderheight)); background-color:white; padding:0; margin:0; display:flex; flex-direction:row; font-size:16px; position:relative; }
.shoplist a { cursor:pointer; }

.shoplist_panel { max-width:500px; width:40vw; position:relative; }

.panel_detail {
    position:absolute; width:100%; height:100%; top:0; left:0; background-color:white; z-index:2; padding:18px; font-size:14px; visibility:hidden; opacity:0; overflow-y:auto;
    transition:300ms visibility, 300ms opacity, 300ms transform; -webkit-transition:300ms visibility, 300ms opacity, 300ms -webkit-transform; -ms-transition:300ms visibility, 300ms opacity, 300ms -ms-transform;
    transform:scale(.5); -webkit-transform:scale(.5); -ms-transform:scale(.5);
}
.panel_detail.active {
    visibility:visible; opacity:1;
    transform:scale(1); -webkit-transform:scale(1); -ms-transform:scale(1);
}

.detail_logo { margin:16px 0 28px 0; /*width:50%;*/ max-height:60px; max-width:290px; }
.detail_wrapper table th { white-space:nowrap; }
.detail_wrapper table th, .detail_wrapper table td { padding-top:4px; padding-bottom:4px; }
.shop_name { font-size:18px; margin-bottom:18px; }
.shop_detail { margin-bottom:40px; }
.shop_detail th { font-weight:bold; text-align:left; padding-right:18px; vertical-align:top; }
.available_title { font-weight:bold; margin-bottom:12px; }
.available_wrapper th, .available_wrapper td { vertical-align:middle; }
.available_wrapper .product_image { width:55px; height:55px; }
.available_wrapper a { text-decoration:underline; }


.panel_crate_wrapper { height:100%; display:flex; flex-direction:column; }
.panel_topbar { padding:18px 16px; display:flex; justify-content:space-between; border-bottom:1px solid #cccccc; }
.topbar_filtertrigger { font-size:14px; }
.topbar_filtertrigger .bulb { width:12px; height:12px; border-radius:12px; display:inline-block; vertical-align:middle; margin-right:4px; }
.topbar_filtertrigger .bulb.active { background-color:#00a651; }
.topbar_filtertrigger .fa { margin-left:4px; }

.panel_crate_container { flex:1; position:relative; overflow:hidden; }

.panel_filter {
    position:absolute; width:100%; height:100%; top:0; left:0; background-color:rgba(255,255,255,.95); z-index:1; padding:18px; font-size:14px;
    transition:300ms transform; -webkit-transition:300ms -webkit-transform; -ms-transition:300ms -ms-transform;
    transform:translateY(-100%); -webkit-transform:translateY(-100%); -ms-transform:translateY(-100%);
}
.panel_filter.active { transform:none; -webkit-transform:none; -ms-transform:none; }

.field_product { padding:10px 30px 10px 14px; line-height:1.3em; border-radius:0; font-size:14px; border:1px solid #686969; }
.select-css {
    padding:10px 30px 10px 14px; -webkit-appearance:none; -moz-appearance:none; appearance:none; line-height:1.3em; margin:0;
    background-image:url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat:no-repeat, repeat; background-position:right .7em top 50%, 0 0; background-size:.65em auto, 100%; border-radius:0; font-size:16px; border:1px solid #686969;
}
.select-css::-ms-expand { display:none; }
.select-css:hover { border-color:#888; }
.select-css:focus { border-color:#aaa; box-shadow:0 0 1px 3px rgba(59, 153, 252, .7); box-shadow:0 0 0 3px -moz-mac-focusring; color:#222; outline:none; }
.select-css option { font-weight:normal; }
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css { background-position: left .7em top 50%, 0 0; padding: .6em .8em .5em 1.4em; }
.select-css:disabled, .select-css[aria-disabled=true] {
    color: graytext; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}

.select-css:disabled:hover, .select-css[aria-disabled=true] { border-color:#aaa; }

.btn_close { width:17px; height:17px; right:18px; top:18px; position:absolute; }
.btn_close img { width:100%; }

.filter_fields { position:relative; display:flex; width:calc(100% - 30px); flex-wrap:wrap; margin-bottom:12px; }
.filter_fields .field_wrapper {
    /* flex:1 1 0; */
    flex:1 1 100%;
    margin-right:0;
}
.filter_fields .hide { display:none; }

.filter_footer { display:flex; justify-content:space-between; }

.filter_getlocation { width:40px; border:1px solid #686969; display:flex; justify-content:center; align-items:center; }

.filter_reset { text-decoration:underline; }

.field_wrapper { margin-right:9px; margin-bottom:9px; }
.field_wrapper .select-css { width:100%; }
.field_wrapper.product { flex:1 1 100%; }
.field_wrapper.district { display:flex; }
.field_wrapper.district .select-css { flex:1; }
.field_wrapper.district .filter_getlocation { border-left:0; }
.field_wrapper.product { display:none; }
.field_wrapper.product.active { display:block; }

.field_product { display:flex; align-items:center; padding:2px 14px 2px 14px; }
.field_product .product_name { flex:1; }
.field_product .product_image { width:38px; height:38px; }
.field_product .field_remove { width:17px; height:17px; }
.field_product .field_remove img { float:left; }

.panel_crate { overflow-y:auto; position:absolute; width:100%; top:0; bottom:0; }
.panel_crate .crate_region { background-color:#d70c19; color:white; padding:8px 18px; }

.panel_crate .crate_item { border-bottom:1px solid #cccccc; display:flex; align-items:center; padding:18px 12px 15px 0; cursor:pointer; position:relative; }
.panel_crate .crate_item.active { background-color:#232323; color:white; }
.panel_crate .crate_logo { width:142px; display:flex; align-items:center; justify-content:center; }
.panel_crate .crate_logo img { width:80%; height:40px; object-fit:contain; }
.panel_crate .crate_shopinfo { font-size:14px; flex:1; }
.panel_crate .crate_shopname { font-weight:bold; margin-bottom:4px; font-size:16px; }
.panel_crate .crate_shopaddress { line-height:1.3em; font-size:1rem; cursor:pointer; margin-bottom:0; word-break:break-word; }
.panel_crate .crate_expanddetail { width:30px; height:30px; margin-left:28px; background-image:url('../img/contents/findastore/symbol-detail@2x.png'); background-size:30px; }

.shoplist_map { flex:1; position:relative; }
.shoplist_map .shoplist_map_overlay { width:100%; height:100%; position:absolute; z-index:1; background-color:rgba(0,0,0,.6); opacity:0; transition:opacity 300ms; pointer-events:none; }
.shoplist_map .shoplist_map_overlay.active { opacity:1; pointer-events:unset; }
.shoplist_map .shoplist_map_overlay a { width:100%; height:100%; display:flex; justify-content:center; align-items:center; flex-direction:column; }
.shoplist_map .shoplist_map_overlay .overlay_img { object-fit:scale-down; max-width:80%; max-height:80%; }
.shoplist_map #shoplist_map_canvas { width:100%; height:100%; position:relative; }




@media screen and (max-width: 1215px) {

}
@media screen and (min-width: 1037px) {
    header > .inner { width:auto; margin:0 28px; }
    header .sub_nav { max-width:980px; left:unset; width:100%; }
}
@media screen and (min-width: 1024px) {
    .topbar_filtertrigger { display:none; }

    .panel_crate_container { display:flex; flex-direction:column; }

    .panel_filter {
        position:relative; height:auto; display:block; border-bottom:1px solid #cccccc;
        transform:none; -webkit-transform:none; -ms-transform:none;
    }
    .panel_filter .btn_close { display:none; }
    .filter_fields { width:100%; }

    .field_wrapper.product { margin-right:0; }
    .field_wrapper.district { margin-right:0; }

    .panel_crate { position:relative; }
}
@media screen and (max-width: 1023px) {
    .shoplist { flex-flow:column; }
    .shoplist_map { order:1; flex:unset; height:32vh; }
    .shoplist_panel { order:2; flex:1; width:100%; max-width:none; }

    .shoplist_panel { position:unset; }

    .panel_topbar { order: 2; border-top: 1px solid #cccccc;}
    .panel_filter { top: unset; bottom: 0; height: unset; -webkit-transform: translateY(100%); padding: 15px 16px; }
    .panel_filter.active { top: unset; bottom: 0; height: unset; background-color: #f2f2f2f5; box-shadow: 0 0 20px 0 hsla(0, 0%, 45%, 0.25);}

    .panel_glass { position:absolute; top:0; left:0; bottom:0; right:0; z-index: 1; background-color:rgba(0, 0, 0, 0.6); cursor:pointer; display: none; opacity: 0; transition: opacity 300ms; }
    .panel_glass.active { display: block; opacity: 100%; }
    .field_wrapper { margin-bottom: -1px; }
}
@media screen and (max-width: 959px) {/* Essential */

}
@media screen and (max-width: 767px) {
    #main.position_fixed { margin-top:0; top:45px; bottom:0; position:fixed !important; }
    #main.position_fixed #container { height:100%; }

    .shoplist { height:100%; min-height:unset; }
}
@media screen and (max-width: 669px) {/* Essential */

}
@media screen and (max-width: 600px) {/* Coupon Card */

}
@media screen and (max-width: 570px) {

}
@media screen and (max-width: 479px) {/* Essential */

}