header {
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: sticky;
    top: 0;
    padding: 0 1.5rem;
    z-index: 5555;
    background: #fff;
    border-bottom: 0.1rem solid #e1e1e1;
    margin-bottom: 2rem;
}
header h1 {
    width: 13rem;
}
header h1 a {
    width: 100%;
}
header h1 a img {
    width: 100%;
}
header #prevBtn {
    width: 2rem;
    position: absolute;
    right: 1.5rem;
}
header #prevBtn img {
    width: 100%;
}

nav {
    background-color: #333333;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 7rem;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 5555;
    border-radius: 1rem 1rem 0 0;
}
nav a {
    width: 25%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
nav a img {
    height: 2rem;
    margin-bottom: 1rem;
}
nav a span {
    font-size: 1.4rem;
    font-weight: 400;
    color: #c4c4c4;
}

main {
    padding: 0 1.5rem 10rem;
}



::placeholder {
    color: #cccccc;
}
::-webkit-scrollbar {
    display: none;
}
::placeholder {
    color: #cacaca;
}



/* home */
.banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 -1.5rem;
    padding: 1rem 1.5rem 5rem;
    background-image: url(../img/main_img.png);
    background-repeat: no-repeat;
    background-position: right 1.5rem bottom 3rem;
    box-shadow: 0 0.3rem 0.5rem rgba(197, 197, 197, 0.2);
    background-size: 18rem;
}
.banner .topTitle {
    font-size: 2.2rem;
    font-weight: 400;
    color: #333333;
    line-height: 1.5;
    margin-bottom: 1rem;
}
.banner .topTitle span.point1 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #ec4040;
}
.banner .topTitle b {
    font-size: 2.2rem;
    font-weight: 700;
    color: #333333;
}
.subTitle {
    font-size: 1.6rem;
    font-weight: 400;
    color: #686868;
    line-height: 1.4;
}
.banner a {
    margin-top: 3rem;
    padding: 1rem 2rem;
    border-radius: 3rem;
    background-color: #ec4040;
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner a span {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
}
.banner a img {
    height: 1.8rem;
    margin-left: 1rem;
}

.home-middle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 5rem;
}
.home-middle .home-button {
    width: calc(100% / 2 - 1rem);
    height: 15rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2rem;
    border-radius: 1rem;
    margin-bottom: 2rem;
}
.home-middle .home-button div,
.home-middle .home-button2 div {
    display: flex;
    flex-direction: column;
}
.home-middle .home-button img {
    width: 2rem;
}
.home-middle .home-button2 {
    width: 100%;
    padding: 2rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 1rem;
}
.home-middle .home-button2 img:nth-of-type(1) {
    width: 5rem;
    margin-right: 2rem;
}
.home-middle .home-button2 img:nth-of-type(2) {
    width: 2rem;
    margin-left: auto;
}
.home-middle .home-button span.light,
.home-middle .home-button2 span.light {
    font-size: 1.6rem;
    font-weight: 400;
    color: #fff;
    display: inline-block;
    margin-bottom: 0.6rem;
}
.home-middle .home-button span.bold,
.home-middle .home-button2 span.bold {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
}

.coral {
    background-color: #ffcfa4;
    background-image: url(../img/main_icon1.png);
    background-repeat: no-repeat;
    background-position: right 1.5rem bottom 1.5rem;
    background-size: 9rem;
}
.orange {
    background-color: #fb8265;
    background-image: url(../img/main_icon2.png);
    background-repeat: no-repeat;
    background-position: right 1.5rem bottom 1.5rem;
    background-size: 8rem;
}
.green {
    background-color: #08aa9f;
}
.section.home h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
}
.home-bottom {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow-x: scroll;
}
.home-bottom a {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48%;
    font-size: 1.8rem;
    font-weight: 700;
    padding: 2rem;
    border-radius: 1rem;
    background-color: #e4f4f3;
    margin-right: 2rem;
}
.home-bottom a img {
    height: 7rem;
    margin-bottom: 2rem;
}
.home-bottom a:nth-of-type(4) img,
.home-bottom a:nth-of-type(5) img {
    height: 4rem;
    margin-top: 2rem;
    margin-bottom: 3rem;
}



/* homeSearch */
.home-search-wrap {
    width: 100%;
    height: 6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5rem 0;
}
.home-drop {
    width: 30%;
    height: 100%;
    border-radius: 1rem;
    border: 0.1rem solid #f0f0f0;
    position: relative;
}
.dropBtn {
    width: 100%;
    height: 100%;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    border-radius: 1rem;
}
.dropBtn .dropBtnText {
    font-size: 1.6rem;
    font-weight: 400;
    color: #505050;
}
.dropBtn img {
    width: 1.8rem;
    margin-bottom: 0.5rem;
}
.dropbox {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 1.5rem 0 1rem;
    border-radius: 1rem;
    border: 0.1rem solid #f0f0f0;
    background-color: #fff;
}
.dropbox li {
    padding: 1rem 1.5rem;
    font-size: 1.8rem;
    font-weight: 400;
    color: #c5c5c5;
}
.dropbox li:active {
    color: #fb7b5c;
    font-weight: 700;
}
.dropbox li.active {
    color: #fb7b5c;
    font-weight: 700;
}
.home-searchItem {
    width: 65%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem 0 1.5rem;
    border-radius: 1rem;
    border: 0.1rem solid #f0f0f0;
}
.home-searchItem input {
    width: 80%;
    font-size: 1.6rem;
    font-weight: 400;
    padding: 1.5rem 0;
}
.home-searchItem button {
    width: 20%;
}
.home-searchItem button img {
    width: 2.5rem;
}


.title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 2rem;
}
.sbTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.title h2,
.sbTitle h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.btn-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* modal */
.modal-filter {
    display: none;
}
.modal-filter.active {
    display: block;
}
.modal-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 2rem;
    border-bottom: 0.1rem solid #e7e7e7;
}
.modal-title h2 {
    font-size: 2rem;
    font-weight: 700;
}
.modal-title img {
    width: 1.8rem;
}
.modal-filter .blackBg {
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6666;
}
.modal {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 30rem;
    padding: 2rem 1.5rem;
    border-radius: 1rem 1rem 0 0;
    background-color: #fff;
    z-index: 7777;
}
.modal-filter .modal h3 {
    font-size: 1.8rem;
    font-weight: 700;
    padding: 1.5rem 0;
}
.modal-filter .modal .filter-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    max-height: 10rem;
    overflow-y: hidden;
    transition: max-height 0.3s ease-in-out;
}
.modal-filter .modal .filter-wrap.filter-wrap-expanded {
    max-height: 42rem;
    overflow-y: scroll;
}
.modal-filter .modal .filter-wrap span {
    font-size: 1.6rem;
    font-weight: 400;
    color: #919191;
    padding: 1rem 1.5rem;
    border-radius: 5rem;
    background-color: #f5f5f5;
}
.modal-filter .modal .filter-wrap span.active {
    color: #fb795a;
    background-color: #fee6e0;
}
.modal-filter .modal .moreBtn {
    padding: 1.5rem 1rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: #b7b7b7;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-filter .modal .moreBtn img {
    width: 1.5rem;
    margin-left: 1rem;
}
.modal-filter .modal .btn-wrap {
    margin-top: 1rem;
}
.modal-filter .modal .btn-wrap button {
    width: calc(100% / 2 - 1rem);
    font-size: 1.8rem;
}
.modal-filter .modal .btn-wrap .resetBtn {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 1rem;
    font-weight: 400;
}
.modal-filter .modal .btn-wrap .resetBtn img {
    width: 1.8rem;
    margin-right: 1rem;
}
.modal-filter .modal .btn-wrap .filterSaveBtn {
    text-align: center;
    font-weight: 700;
    color: #fff;
    border-radius: 1rem;
    padding: 2rem;
    background-color: #fb8265;
}



.tools {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.tools .search-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 5rem;
    margin-bottom: 2rem;
}
.tools .search-wrap .search-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    height: 100%;
    padding: 0 1.5rem;
    border-radius: 1rem;
    border: 0.1rem solid #f3f3f3;
}
.tools .search-wrap .search-item .searchInput {
    width: 85%;
    height: 100%;
    padding: 1rem 0;
    font-size: 1.6rem;
    font-weight: 400;
    color: #555555;
}
.tools .search-wrap .search-item button.searchBtn {
    width: 15%;
    height: 100%;
}
.tools .search-wrap .search-item button.searchBtn img {
    width: 2.5rem
}
.tools .search-wrap button.filterBtn {
    width: 14%;
    height: 100%;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    border: 0.1rem solid #f3f3f3;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tools .search-wrap button.filterBtn img {
    width: 2.5rem;
}
.tools .filtering-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 5rem;
}
.tools .filtering-wrap .city-wrap,
.tools .filtering-wrap .region-wrap {
    width: calc(100% / 2 - 1rem);
    height: 100%;
    padding: 0 1.5rem;
    border-radius: 1rem;
    border: 0.1rem solid #f3f3f3;
    position: relative;
}
.citybox,
.regionbox {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 28rem;
    border-radius: 1rem;
    border: 0.1rem solid #f3f3f3;
    padding: 1rem 0;
    overflow-y: scroll;
    background-color: #fff;
    z-index: 5000;
}
.citybox li,
.regionbox li {
    font-size: 1.5rem;
    font-weight: 400;
    color: #555555;
    padding: 1rem 1.5rem;
}
.citybox li:active,
.regionbox li:active {
    color: #fb7b5c;
}
.cityBtn, .regionBtn {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cityBtn span, .regionBtn span {
    font-size: 1.5rem;
    font-weight: 400;
    color: #555555;
}
.cityBtn img, .regionBtn img {
    width: 1.5rem;
}


.list-wrap {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 3rem;
}
.list-item {
    padding: 1.5rem;
    border-radius: 1rem;
    border: 0.1rem solid #f3f3f3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.list-item .info {
    width: 90%;
    display: flex;
    flex-direction: column;
}
.list-item .info h3.name {
    font-size: 1.7rem;
    font-weight: 700;
    color: #333333;
    line-height: 1.3;
    margin-bottom: 1.5rem;
    word-break: break-word;
    white-space: normal;
}
.list-item .info p.addr {
    font-size: 1.5rem;
    font-weight: 400;
    color: #5b5b5b;
    line-height: 1.3;
    margin-bottom: 1rem;
}
.list-item .info p.tel {
    font-size: 1.5rem;
    font-weight: 400;
    color: #5b5b5b;
}
.list-item button.scrapBtn {
    width: 10%;
    align-self: flex-start;
}
.list-item button.scrapBtn img {
    width: 2rem;
}


.pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}
.pagination a {
    font-size: 1.6rem;
    font-weight: 400;
}
.pagination a img {
    height: 1.5rem;
    margin-bottom: 0.4rem;
}
.pagination a.active {
    font-weight: 700;
    background-color: #a4dbd8;
    color: #05a99e;
    border-radius: 50%;
    padding: 0.8rem 1rem 0.5rem 0.8rem;
    margin: 0 -0.5rem 0.3rem;
}
.no-result {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-result pre {
    font-size: 1.6rem;
    font-weight: 400;
    color: #5d5d5d;
    line-height: 1.5;
    text-align: center;
}

/* detail */
.sbTitle h2 {
    margin-bottom: 0;
}
.sbTitle button img {
    width: 1.8rem;
}
.section.detail p {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    line-height: 1.5;
    color: #555555;
}
.section.detail p.bold {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #333;
}
.section.detail p span {
    font-size: 1.6rem;
    font-weight: 700;
    color: #555555;
    display: inline-block;
    margin-right: 1rem;
}
.section.detail .time p {
    margin-bottom: 1rem;
}
.section.detail #map{
    margin: 1.5rem 0;
    border-radius: 1rem;
}
.section.detail #map .leaflet-control-container {
    display: none;
}

/* pharmacy */
.section.pharmacy .tools .search-wrap .search-item {
    width: 100%;
}
.section.pharmacy .tools .search-wrap .search-item .searchInput {
    width: 90%;
}
.section.pharmacy .tools .search-wrap .search-item button.searchBtn {
    width: 10%;
}



/* scrap */
.section.scrap .category-wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 1rem;
    overflow: hidden;
}
.section.scrap .category-wrap a {
    width: 50%;
    font-size: 1.8rem;
    font-weight: 400;
    color: #afafaf;
    background-color: #f2f2f2;
    text-align: center;
    padding: 1.6rem 0;
}
.section.scrap .category-wrap a.active {
    font-weight: 700;
    color: #01a79c;
    background-color: #a4dbd8;
}
.scrap-list {
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}





@media screen and (max-width: 360px) {
    .banner {
        background-size: 15rem;
    }
    .coral {
        background-size: 8rem;
    }
    .orange {
        background-size: 7rem;
    }
    .dropBtn {
        padding: 0 1.3rem;
    }
    .home-searchItem {
        padding: 0 0.5rem 0 1.3rem;
    }
}