@font-face {
     font-family: "AvantGardeCE-Light";
     src: url("../font/FONTS/AvantGardeCE-Light.eot");
     src: url("../font/FONTS/AvantGardeCE-Light.eot?#iefix") format("embedded-opentype"), url("../font/FONTS/AvantGardeCE-Light.woff") format("woff"), url("../font/FONTS/AvantGardeCE-Light.ttf") format("truetype");
 }

 @font-face {
     font-family: "AvantGardeCE-Book";
     src: url("../font/FONTS/AvantGardeCE-Book.eot");
     src: url("../font/FONTS/AvantGardeCE-Book.eot?#iefix") format("embedded-opentype"), url("../font/FONTS/AvantGardeCE-Book.woff") format("woff"), url("../font/FONTS/AvantGardeCE-Book.ttf") format("truetype");
 }

 @font-face {
     font-family: "AvantGardeCE-Demi";
     src: url("../font/FONTS/AvantGardeCE-Demi.eot");
     src: url("../font/FONTS/AvantGardeCE-Demi.eot?#iefix") format("embedded-opentype"), url("../font/FONTS/AvantGardeCE-Demi.woff") format("woff"), url("../font/FONTS/AvantGardeCE-Demi.ttf") format("truetype");
 }

 @font-face {
     font-family: "AvantGardeCE-Medium";
     src: url("../font/FONTS/FONTS/AvantGardeCE-Medium.eot");
     src: url("../font/FONTS/AvantGardeCE-Medium.eot?#iefix") format("embedded-opentype"), url("../font/FONTS/AvantGardeCE-Medium.woff") format("woff"), url("../font/FONTS/AvantGardeCE-Medium.ttf") format("truetype");
 }

 @font-face {
     font-family: "AvantGardeGothic-Demi";
     src: url("../font/FONTS/AvantGardeGothic-Demi.eot");
     src: url("../font/FONTS/AvantGardeGothic-Demi.eot?#iefix") format("embedded-opentype"), url("../font/FONTS/AvantGardeGothic-Demi.woff") format("woff"), url("../font/FONTS/AvantGardeGothic-Demi.ttf") format("truetype");
 }

 .gm-style * {
     background-size: contain;
 }

 .page-head {
     background-color: #f8f5ee;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
 }

 .page-head .inner-container {
     padding: 40px 0;
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
     -moz-box-pack: justify;
     -ms-flex-pack: justify;
     -webkit-justify-content: space-between;
     justify-content: space-between;
 }

 .page-head h1 {
     text-transform: uppercase;
     font-size: 2.429em;
 }

 .page-head .wrapper {
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
 }

 .page-head .category {
     font-size: 1.571em;
     position: relative;
     display: block;
     cursor: pointer;
 }

 .page-head .category:not(:last-child) {
     margin-right: 40px;
 }

 .page-head .category:after {
     content: "";
     height: 4px;
     width: 0;
     background-color: #c0272d;
     display: inline-block;
     position: absolute;
     bottom: -6px;
     right: 0;
     opacity: 0;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 .page-head .category.active,
 .page-head .category:hover {
     color: #c0272d;
 }

 .page-head .category.active:after,
 .page-head .category:hover:after,
 .page-head .category.active:after,
 .page-head .category:hover:after {
     opacity: 1;
     left: 0;
     right: auto;
     width: 100%;
 }

 .content .container {
     padding: 0;
     max-width: none;
 }

 .map-container {
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     height: 670px;
 }

 .map-container .panel-box {
     width: 30%;
 }

 .map-container #map-canvas {
     width: 70%;
     height: 100%;
 }

 .map-container .panel-list {
     height: 100%;
 }

 .map-container .panel-list #searchBox {
     width: calc(100% - 36px - 18px);
     padding-right: 10px;
 }

 .map-container .panel-list .close-b {
     cursor: pointer;
 }

 .map-container .panel-list .input-container {
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -moz-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
 }

 .map-container .panel-list .input-container input[type="text"] {
     border: none;
 }

 .map-container .panel-list .input-container ::placeholder {
     color: #000;
     font-family: "AvantGardeCE-Book", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
 }

 .map-container .panel-list .input-container :-ms-input-placeholder {
     color: #000;
     font-family: "AvantGardeCE-Book", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
 }

 .map-container .panel-list .input-container ::-ms-input-placeholder {
     color: #000;
     font-family: "AvantGardeCE-Book", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
 }

 .map-container .panel-list .input-container .magnifier {
     margin-right: 20px;
 }

 .map-container .panel-list form {
     padding: 20px 30px;
     border-bottom: 1px solid #cccccc;
 }

 #storeList {
     overflow: auto;
     height: calc(100% - 64px);
 }

 #storeList .list-group-item {
     border-radius: 0;
     border: 0;
     border-top: 2px solid #cccccc;
     padding: 30px 20px 30px 50px;
     cursor: pointer;
 }

 #storeList .list-group-item.current .location {
     color: #c0272d;
 }

 #storeList .list-group-item .status {
     position: absolute;
     left: 0;
     top: 0;
     font-size: 0.857em;
     text-transform: uppercase;
     height: 100%;
     width: 30px;
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -moz-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
     justify-content: center;
 }

 #storeList .list-group-item .status.open {
     background-color: #c0272d;
     color: #fff;
 }

 #storeList .list-group-item .status.closed {
     background-color: #f8f5ee;
     color: #000;
 }

 #storeList .list-group-item .status span {
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     -webkit-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
     -ms-transform: rotate(-90deg);
     -o-transform: rotate(-90deg);
     transform: rotate(-90deg);
     display: block;
     letter-spacing: 1px;
 }

 #storeList .location {
     font-size: 1.143em;
     text-transform: uppercase;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     margin-bottom: 10px;
 }

 #storeList .location.active {
     color: #c0272d;
 }

 #storeList .address {
     margin-bottom: 10px;
 }

 #map-canvas .gm-style-iw {
     top: 10px !important;
     background-color: transparent;
     box-shadow: none;
     padding: 0 !important;
 }

 #map-canvas .gm-style .gm-style-iw-d {
     overflow-y: hidden !important;
 }

 #map-canvas .gm-style .gm-style-iw-d:-webkit-scrollbar {
     background: transparent;
 }

 #map-canvas .gm-style .gm-style-iw-d:-webkit-scrollbar-track {
     background: transparent;
 }

 #map-canvas .gm-style .gm-style-iw-d:-webkit-scrollbar-thumb {
     background: transparent;
 }

 #map-canvas .gm-style .gm-style-iw-d::-webkit-scrollbar-track,
 #map-canvas .gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece {
     background: transparent;
 }

 #map-canvas .gm-style .gm-style-iw-t:after {
     display: none;
 }

 #map-canvas .gm-style-iw-t:before {
     display: none;
 }

 #map-canvas .gm-style-iw button {
     display: none !important;
 }

 #map-canvas .infoWindowContent {
     padding: 30px;
     border-radius: 10px;
     background-color: #c0272d;
     color: #fff;
     font-family: "AvantGardeCE-Book", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial" !important;
     max-width: 413px;
 }

 #map-canvas .infoWindowContent .location {
     font-size: 1.143em;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     text-transform: uppercase;
     margin-bottom: 15px;
 }

 #map-canvas .infoWindowContent .address,
 #map-canvas .infoWindowContent .tel {
     margin-bottom: 15px;
 }

 #map-canvas .infoWindowContent .tel {
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -moz-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
 }

 #map-canvas .infoWindowContent .tel .icon {
     margin-right: 10px;
 }

 #map-canvas .infoWindowContent .business_hour {
     margin-bottom: 20px;
 }

 #map-canvas .infoWindowContent>div:last-of-type {
     margin-bottom: 0;
 }

 #map-canvas .infoWindowContent .icon-container {
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -moz-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
 }

 #map-canvas .infoWindowContent .icon-container .icon:not(:last-child) {
     margin-right: 15px;
 }

 #map-canvas .infoWindowContent .tip {
     position: absolute;
     bottom: 2px;
     left: 50%;
     width: 31px;
     height: 15px;
     background-image: url(../image/info_triangle.svg);
     background-repeat: no-repeat;
     background-size: 100%;
     -webkit-transform: translateX(-50%);
     -moz-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     -o-transform: translateX(-50%);
     transform: translateX(-50%);
 }

 @media (min-width: 768px) {
     .page-head-mobile {
         display: none;
     }

     .content .menu-m {
         display: none;
     }
 }

 @media (min-width: 768px) and (max-width: 991px) {
     .map-container #map-canvas {
         width: 60%;
     }

     .map-container .panel-box {
         width: 40%;
     }
 }

 @media (max-width: 767px) {
     .page-head {
         display: none;
     }

     .page-head-mobile {
         padding-right: 24px;
         padding-left: 24px;
         position: absolute;
         left: 0;
         z-index: 1;
         width: 100%;
         background-color: #fff;
         padding-top: 64px;
         -webkit-transform: translateX(-100%);
         -moz-transform: translateX(-100%);
         -ms-transform: translateX(-100%);
         -o-transform: translateX(-100%);
         transform: translateX(-100%);
         -webkit-transition: all 0.3s ease-in-out;
         -moz-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
         transition: all 0.3s ease-in-out;
     }

     .page-head-mobile.active {
         -webkit-transform: translateX(0);
         -moz-transform: translateX(0);
         -ms-transform: translateX(0);
         -o-transform: translateX(0);
         transform: translateX(0);
     }

     .page-head-mobile .search .wrapper {
         display: -webkit-box;
         display: -moz-box;
         display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
         position: fixed;
         background-color: #fff;
         border-bottom: 1px solid #cccccc;
         left: 0;
         top: 0;
         z-index: 1;
         width: 100%;
         padding: 0 24px;
     }

     .page-head-mobile .search .wrapper .input-container {
         width: calc(100% - 36px);
         display: -webkit-box;
         display: -moz-box;
         display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-pack: justify;
         -moz-box-pack: justify;
         -ms-flex-pack: justify;
         -webkit-justify-content: space-between;
         justify-content: space-between;
         -webkit-box-align: center;
         -moz-box-align: center;
         -webkit-align-items: center;
         -ms-flex-align: center;
         align-items: center;
     }

     .page-head-mobile .search .wrapper .input-container input[type="text"] {
         border: none;
     }

     .page-head-mobile .search .wrapper .input-container ::placeholder {
         color: #000;
         font-family: "AvantGardeCE-Book", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     }

     .page-head-mobile .search .wrapper .input-container :-ms-input-placeholder {
         color: #000;
         font-family: "AvantGardeCE-Book", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     }

     .page-head-mobile .search .wrapper .input-container ::-ms-input-placeholder {
         color: #000;
         font-family: "AvantGardeCE-Book", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     }

     .page-head-mobile .search .wrapper .input-container .icon {
         cursor: pointer;
         display: inline-block;
         -webkit-transition: all 0.3s ease-in-out;
         -moz-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
         transition: all 0.3s ease-in-out;
     }

     .page-head-mobile .search .wrapper .input-container .icon:hover {
         -webkit-transform: rotate(90deg);
         -moz-transform: rotate(90deg);
         -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
         transform: rotate(90deg);
     }

     .page-head-mobile .panel-list {
         margin-left: -24px;
         margin-right: -24px;
     }

     .page-head-mobile .icon.magnifier {
         width: 21px;
         height: 21px;
         margin-right: 15px;
     }

     .menu-m {
         display: -webkit-box;
         display: -moz-box;
         display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-pack: justify;
         -moz-box-pack: justify;
         -ms-flex-pack: justify;
         -webkit-justify-content: space-between;
         justify-content: space-between;
     }

     .menu-m .search-wrap {
         padding-left: 24px;
         padding-right: 24px;
         cursor: pointer;
     }

     .menu-m .select-container {
         width: 100%;
         padding-right: 24px;
         background-color: #f8f5ee;
         display: -webkit-box;
         display: -moz-box;
         display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-align: center;
         -moz-box-align: center;
         -webkit-align-items: center;
         -ms-flex-align: center;
         align-items: center;
     }

     .menu-m .select-container select {
         width: 100%;
         height: 100%;
         padding-left: 20px;
         background-color: transparent;
         cursor: pointer;
         border: 0;
         box-shadow: none;
         -webkit-appearance: none;
         -moz-appearance: none;
         -o-appearance: none;
         appearance: none;
         outline: none;
         border-radius: 0;
         font-size: 1.143em;
         color: #c0272d;
         font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
         background-image: url(../image/drop_down_r.svg);
         background-size: 12px 7px;
         background-position: right;
         background-repeat: no-repeat;
     }

     .search-wrap {
         background-color: #fff;
         height: 64px;
         display: -webkit-box;
         display: -moz-box;
         display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-pack: center;
         -moz-box-pack: center;
         -ms-flex-pack: center;
         -webkit-justify-content: center;
         justify-content: center;
         -webkit-box-align: center;
         -moz-box-align: center;
         -webkit-align-items: center;
         -ms-flex-align: center;
         align-items: center;
     }

     .content .panel-box {
         display: none;
     }

     .map-container #map-canvas {
         width: 100%;
     }
 }

 @media (min-width: 576px) and (max-width: 767px) {
     .page-head-mobile {
         top: 113px;
     }

     .page-head-mobile .search .wrapper .input-container input[type="text"] {
         font-size: 1.143em;
     }
 }

 @media (min-width: 576px) and (max-width: 767px) and (orientation: landscape) {

     #storeList,
     .map-container {
         height: calc(100vw - 113px);
     }
 }

 @media (min-width: 576px) and (max-width: 767px) and (orientation: portrait) {

     #storeList,
     .map-container {
         height: calc(100vh - 113px);
     }
 }

 @media (max-width: 575px) {
     .page-head-mobile {
         top: 89px;
     }

     .page-head-mobile .search .wrapper .input-container input[type="text"] {
         font-size: 1.333em;
     }

     #map-canvas .infoWindowContent {
         max-width: 300px;
         padding: 20px;
     }
 }

 @media (max-width: 575px) and (orientation: landscape) {

     #storeList,
     .map-container {
         height: calc(100vw - 89px);
     }
 }

 @media (max-width: 575px) and (orientation: portrait) {

     #storeList,
     .map-container {
         height: calc(100vh - 89px);
     }
 }