@charset "UTF-8";
/* CSS Document */


* {margin:0px; padding:0px;}

@font-face {
	font-family: 'Daniela';
	src:url('../images/fonts/Daniela_Bold.woff') format("woff"),
		url('../images/fonts/Daniela_Bold.ttf') format("truetype"),
		url('../images/fonts/Daniela_Bold.eot') format("embedded-opentype");
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500&display=swap');

body, html {position:relative; font-size:16px; font-family:'Noto Sans TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:300; overflow-x:hidden; background:#e2e1e3;}
a, input, button {text-decoration:none; outline:none !important;}
a:hover, a:focus, a:active {text-decoration:none; cursor:pointer !important; outline:none !important;}
ul, li {list-style:none;}

#wrapper {margin-top:50px;}

.cats {display:block; margin:15px 0px 8px 0px; position:relative; box-sizing:border-box; padding:0px 20px;}
.cats a {display:inline-block; font-size:14px; color:#444; font-weight:400; margin-right:3px;}
.cats a::after {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 2px 5px;
    padding: 0;
    border: 1px solid #444444;
    border-color: #444444 #444444 transparent transparent;
    transform: rotate(45deg);
}

h1.pagename {font-size:30px; color:#444; letter-spacing:6px !important; box-sizing:border-box; padding:0px 20px; margin-bottom:15px; font-weight:normal;}

h2.areaname {font-size:18px; color:#444; font-weight:500; margin-bottom:10px;}

.area {display:block; position:relative; box-sizing:border-box; margin-bottom:20px;}

.tw_area_list {display:block; background:white; box-sizing:border-box; padding:5px 20px; margin-bottom:3px; font-weight:400;}

.tw_area_list_a {display:block; font-size:16px; color:#444; padding:0px 15px; -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.tw_area_list_a.active {padding:0px; margin-bottom:10px;}

.plus {display:inline-block; vertical-align:middle; width:20px; height:20px; position:relative;}
.plus span:nth-child(1) {display:block; width:1px; height:10px; position:absolute; background:#444; top:3px; left:9px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
.plus span:nth-child(2) {display:block; width:11px; height:1px; position:absolute; background:#444; top:7px; left:4px;}
.plus.active span:nth-child(1) {-webkit-transform: rotate(90deg);transform: rotate(90deg);}


.dist {position:relative; display:none;}

.dist_list {display:block; box-sizing:border-box; padding:3px; background:#e5e5e2; margin:0px 15px; margin-bottom:3px; -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.dist_list.active {margin:0px 5px 3px 5px;}
.dist_list_a {display:block; font-size:15px; font-weight:400; color:#444;}

.store_list {position:relative;}

.stores {background:white; margin-top:3px; box-sizing:border-box; padding:10px; font-weight:300;}
.stores .store_name {font-size:14px; margin-bottom:6px; color:#444;}
.stores span {display:block; position:relative; font-size:14px; color:#444;}
.stores span a {color:#444;}
.stores span .map {display:block; width:30px; height:auto; font-size:12px; text-align:center; color:#444; position: absolute;
    top: 50%;
    right: 0px; -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);}
.stores span .map img {display:block; width:20px; height:auto; margin:auto;}
.stores span .map::before {
    content: "";
    display: block;
    position: absolute;
    left: -10px;
    top: 50%;
    width: 1px;
    height: 20px;
    margin: -10px 0 0 0;
    padding: 0;
    background-color: #cccccc;
}

.other_buy {display:block; margin-bottom:30px; position:relative;}
.other_buy a {display:inline-block; width:23%; max-width:170px; padding-top:5px;}
.other_buy a img {width:100%; height:auto;}



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

    h2.areaname {font-size:16px; padding-left:10px;}
    .tw_area_list_a {font-size:14px; padding:0px 5px;}
    .dist_list {margin:0px 5px; margin-bottom:3px;}
    .dist_list_a {font-size:14px;}
    .other_buy a {width:40%; margin-bottom:10px;}
      
}