ion-header {
    position: absolute;
    display: flex;
    align-items: center;

    ion-button {
        --background: none;
        --border-radius: 1000px;
        
        #location{
            padding: 0;
            margin: 0;
            color: white;
        }
        #icon{
            color: white;
        }
    }

    ion-searchbar {
        --background: #f8f8f882;
        --border-radius: 1000px;
        padding: 0;
        padding-right: 20px;
    }
}

#banner {
    width: 100%;
    height: 350px;

    swiper-container {
        width: 100%;
        height: 100%;
    }

    ion-img {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
}

ion-card {
    border-radius: 20px;
    width: 100%;
    margin: 0;
    top: -15px;
    z-index: 1;
    box-shadow: none;

    .main-button {
        width: 21%;
        margin: 20px 2%;
    }

    ion-img {
        width: 100%;
        height: 21vw;
    }

    p {
        text-align: center;
        font-size: 16px;

        @font-face {
            font-family: 'main-button-font';
            src: url(/assets/fonts/mainButton.TTC);
        }

        font-family: 'main-button-font';
        margin: 5px 0;
        padding: 0;
        color: black;
    }

    .remind {
        height: 40px;
        width: 60px;
        padding: 0;
        margin-right: 10px;
    }

    ion-text {
        font: 100 20px 'main-button-font';
        color: #000;
        padding: 0;
    }
}

ion-content {
    --background: #f8f8f8;
    --color: #000;

    ion-segment-view{
        height: auto;
    }
}

ion-segment {
    margin: 0;
    padding-left: 0;
    display: flex;
    justify-content: flex-start;

    ion-segment-button {
        --color: gray;
        --color-checked: black;

        @font-face {
            font-family: 'segment-title-font';
            src: url(/assets/fonts/STFANGSO.TTF);
        }

        font-family: 'segment-title-font';
        font-size: 25px;
        font-weight: bolder;
        --indicator-color:none;
        --padding-start:0px;
        --padding-end:0px;
        --margin-start:0px;
        --margin-end:0px;
    }
}

.all {
    color: gray;
    --background: none;
    --padding-start: 0;
    --padding-end: 0;
    --padding-top: 0;
    --padding-bottom: 0;
    width: 120px;
    --box-shadow: none;
}

#first,#like {
    width: 100vw;
}

.segment-content {
    width: 95vw;
    margin-left: 5%;
    height: 200px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    display: flex;
    align-items: center;

    img{
        display: inline-block;
        height: 90%;
        border-radius: 20px !important;
        margin-right: 10px;
    }
}