my_tests/assets/decoQuery_html/css/components/_main.scss

// ++++ 變數設定 ++++

$main-ft: 'Microsoft JhengHei', Helvetica, Noto Sans TC, Roboto, Arial, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$main-font-color: #727679;
$title-color: #43484C;
$main-deco-color: #EE7800;

$btn-color: rgba(238, 120, 0, 0.7);
$btn-hover-color: rgba(238, 120, 0, 1);


// ++++ Mixin ++++

@mixin roundCorner {
    border-radius: 0.1875rem;
}

@mixin bgImage {
    background-repeat: no-repeat;
    background-position: center center;
}

// ++++ 共用css ++++

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    color: $main-font-color;
    font-family: $main-ft;
    font-size: 1rem;
    &:hover, &:active {
        text-decoration: none;
    }
}

body {
    background-color: #F6F6F6;
    position: relative;
}

ul {
    padding-inline-start: 0;
}

.shadow-decoQuery {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.border-divider {
    border-left: 1px solid #EFEFEF;
}

.btn:focus {
    &:focus {
        outline: 0;
        box-shadow: none;
    }
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-size: cover;
    @include bgImage();
    cursor: pointer;
    transition: all 300ms ease-in-out;
    &--xl {
        width: 150px;
        height: 150px;
        transition: all 300ms ease-in-out;
        @media screen and(max-width: 576px) {
            width: 100px;
            height: 100px;
        }
    }
}

.caseBgImage {
    height: 232px;
    background-size: cover;
    @include bgImage();
    transition: all 300ms ease-in-out;
    @media screen and(max-width: 576px) {
        height: 110px;
    }
}

:focus {
    outline: transparent auto 0 !important;
    border: none !important;
}

input {
    &:focus {
        outline: transparent auto 0 !important;
        border: none !important;
    }
}

.focus-status {
    &:focus {
        border-color: transparent;
        box-shadow: none;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }
}


//switcher
.swicher {
    display: flex;
    justify-content: center;
    height: 52px;
    border-radius: 30px;
    position: relative;
    background: #AAA;
    color: #FFF;

    &__block {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
    }

    &__items {
        cursor: pointer;
        width: calc(100%/3);
        height: 100%;
        text-align: center;
        align-items: center;
        display: flex;
        justify-content: center;
        border-radius: 30px;

        a {
            color: #FFF;
        }

        &.active {
            height: 103%;
            color: #EE7800;
            border: 1px solid #FFF;
            background-color: #FFF;
            border-radius: 30px;
            font-weight: bold;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);

            a {
                color: $main-deco-color;
            }
        }
    }
}

// <!--[[[[[[[[[[[[[[[[[ nav ]]]]]]]]]]]]]]]]]  -->

nav {

    .nav-wrapper {
        display: flex;
        justify-content: center;
        padding: .45rem 0;
    }

    img {
        width: 120px;
        height: 50px;
    }

    // .arrow {
    //     color: $bg-color;
    //     padding:0 0 0 1.2rem;
    // }

}

.fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    background-color: #FFF;
}


// <!--[[[[[[[[[[[[[[[[[ title ]]]]]]]]]]]]]]]]]  -->


.title {
    margin-top: 30px;
    transition: all 300ms ease-in-out;
    @media screen and(max-width: 576px) {
        margin-top: 55px;
    }

    &__block {
        text-align: center;

        .h1 {
            color: $title-color;
            font-size: 2rem;
            font-weight: bold;
            padding: 1rem 0;
            line-height: 1.2;
            margin: 0;
        }
        .small {
            font-size: 1rem;
            color: #AAA;
        }
    }

}


// <!--[[[[[[[[[[[[[[[[[ 搜尋 ]]]]]]]]]]]]]]]]]  -->

.search {
    position: relative;

    .icon {
        position: absolute;
        top: 20%;
        right: 1%;
        transition: all 300ms ease-in-out;
        @media screen and(max-width: 576px) {
            right: 3%;
        }
    }

    img {
        width: 27px;
        height: 27px;
    }
}

.form-control {
    padding: 1.575rem 0.75rem;
    border: none;
    border-radius: 0.1875rem;

    &:focus {
        color: #495057;
        background-color: #fff;
        border: none !important;
        outline: 0;
        box-shadow: none;
    }
}

/*webkit瀏覽器專用*/
.search ::-webkit-input-placeholder {
    color: #D4D4D4;
}
/*Firefox 4-18瀏覽器專用*/
.search input::-moz-placeholder {
    color: #D4D4D4;
}
/*Firefox 19+瀏覽器專用*/
.search input::-moz-placeholder {
    color: #D4D4D4;
}
/*IE10瀏覽器專用*/
.search:-ms-input-placeholder {
    color: #D4D4D4;
}

// [[[[[[[[[[[[[[[[[ 縣市、區、街道 ]]]]]]]]]]]]]]]]]

.topicSubitems {
    width: 100%;
    background-color: #FFF;
    text-align: center;
    @include roundCorner();
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);

    a {
        color: #909090;
        padding: 1.2rem 0;
        display: inline-block;
        font-size: 1rem;
    }

    &:hover {
        cursor: pointer;
        box-shadow: none;

        a {
            color: #909090;
        }
    }

    &:visited,
    &:active,
    &.active {
        box-shadow: none;
        a {
            color: #909090;
        }
    }

}


// [[[[[[[[[[[[[[[[[ 縣市選擇--4欄 ]]]]]]]]]]]]]]]]] 


.county {

    display: flex;
    justify-content: start;
    flex-wrap: wrap;

    a {
        color: #909090;
        padding: 1.2rem 0;
        display: inline-block;
        font-size: 1rem;
    }


    &__items {
        width: 23%;
        text-align: center;
        margin-right: 2%;
        background-color: #FFF;
        @include roundCorner();
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);

        &:hover {
            cursor: pointer;
            box-shadow: none;
            a {
                color: #909090;
            }
        }

        &:visited,
        &:active,
        &.active {
            box-shadow: none;
            a {
                color: #909090;
            }
        }

    }

}

// [[[[[[[[[[[[[[[[[  各鄉鎮市區--3欄  ]]]]]]]]]]]]]]]]]


.district {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;

    a {
        color: #909090;
        padding: 1.2rem 0;
        display: inline-block;
        font-size: 1rem;
    }

    &__items {
        width: 31.3333%;
        text-align: center;
        margin-right: 2%;
        margin-bottom:.5rem;
        background-color: #FFF;
        @include roundCorner();
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);

        &:hover {
            cursor: pointer;
            box-shadow: none;
            a {
                color: #909090;
            }
        }

        &:visited,
        &:active,
        &.active {
            box-shadow: none;
            a {
                color: #909090;
            }
        }

    }
}


// [[[[[[[[[[[[[[[[[  各街道--2欄  ]]]]]]]]]]]]]]]]] 


.street {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;

    a {
        color: #909090;
        padding: 1.2rem 0;
        display: inline-block;
        font-size: 1rem;
    }

    &__items {
        width: 48%;
        margin-right: 2%;
        margin-bottom:.5rem;
        text-align: center;
        background-color: #FFF;
        @include roundCorner();
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);

        &:hover {
            cursor: pointer;
            box-shadow: none;
            a {
                color: #909090;
            }
        }

        &:visited,
        &:active,
        &.active {
            box-shadow: none;
            a {
                color: #909090;
            }
        }

    }
}


// [[[[[[[[[[[[[[[[[  各縣市筆數  ]]]]]]]]]]]]]]]]]


.countiesNum {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #43484C;

    a {
        color: #43484C;
        padding: 1.2rem 0;
        display: inline-block;
        font-family: $main-ft;
    }
}

.countiesNumCity {
    width: 48%;
    text-align: center;
    line-height: 2;
    color: #43484C;

    &__items {
        display: flex;
        margin: 0 1rem;
        padding: .3rem 0;
        border-bottom: 1px solid #dbdbdb;
        font-family: $main-ft;

        &__lf {
            width: 50%;
        }
    }
    
}

.countiesNumLine {
    width: 2%;
    justify-content: center;
    align-items: center;
    padding: .8rem .2rem;

    .line {
        height: 100%;
        border-left: 1px solid #dbdbdb;
    }
    
}

// <!--[[[[[[[[[[[[[[[[[  選擇縣市、區域、路段後的結果  ]]]]]]]]]]]]]]]]]  -->

.list{
    
    &__title {
        h4 {
            color: $title-color;
            font-weight: bold;
            min-height: 56px;
            transition: all 300ms ease-in-out;
            @media screen and(max-width: 576px) {
                font-size: 1.125rem;
                margin-bottom: 0;
            }
        }
        &__approve {
            color: $main-deco-color;
            font-size: 0.95rem;
            font-weight: bold;
            transition: all 300ms ease-in-out;
            @media screen and(max-width: 576px) {
                font-size: 0.95rem;
            }
        }
    }

    &__img {
        margin: 0 0 0 3rem;
        transition: all 300ms ease-in-out;
        @media screen and(max-width: 576px) {
            margin: 0 0 0 1rem;
        }
    }

    &__context {
        color: $main-font-color;
        font-size: 0.875rem;
        a {
            &:hover {
                color: $main-font-color;
            }
        }
    }

    &__tel {
        color: $title-color;
        font-size: 1.125rem;
        font-weight: 600;
        transition: all 300ms ease-in-out;
        @media screen and(max-width: 576px) {
            font-size: 0.875rem;
            text-align: left;
        }
        &--empty {
            min-height: 70px;
            visibility: visible;
            transition: all 300ms ease-in-out;
            @media screen and(max-width: 576px) {
                min-height: 35px;
            }
        }
        a {
            color: $main-deco-color;
            font-size: 1.5rem;
            font-weight: bold;
            line-height: 1.2;
            transition: all 300ms ease-in-out;
            @media screen and(max-width: 576px) {
                font-size: 1.125rem;
            }
        }
    }

    &__btn {
        a {
            color: $btn-color;
            font-size: 1rem;
            font-weight: 600;
            border: 1px solid $btn-color;
            border-radius: 8px;
            padding: 0.8rem 0.75rem;
            background-color: #FFF;
            transition: all 300ms ease-in-out;
            &:hover {
                color: $btn-hover-color;
                border: 1px solid $btn-hover-color;
            }
            &:focus {
                border: 1px solid $btn-color !important;
            }
        }
    }

    &__btn2 {
        a {
            color: #B0B0B0;
            font-size: 1rem;
            font-weight: 600;
            border: 1px solid #B0B0B0;
            border-radius: 8px;
            padding: 0.8rem 0.75rem;
            transition: all 300ms ease-in-out;
            &:hover {
                color: $btn-hover-color;
                border: 1px solid $btn-hover-color;
            }
            &:focus {
                border: 1px solid $btn-color !important;
            }
        }
    }
}

.fa-xl {
    @media screen and(max-width: 576px) {
        font-size: 1em;
    }
}

//Swiper
.swiper-button-prev:after{
    content:'' !important;
    width: 23px;
    height: 40px;
    background: url("../images/icon/btn-prev.png") no-repeat ;
    background-position: center;
    display: inline-block;
}
.swiper-button-next:after{
    content:'' !important;
    width: 23px;
    height: 40px;
    background: url("../images/icon/btn-next.png") no-repeat ;
    background-position: center;
    display: inline-block;
}

@media screen and(max-width: 576px) {
    .swiper-wrapper, .swiper-slide {
        height: 110px !important;
    }
}

// <!--[[[[[[[[[[[[[[[[[  Pagination  ]]]]]]]]]]]]]]]]]  -->

.pagination{
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;

    .page-item {
        &.active {
            .page-link {
                color: #fff;
                background-color: $main-deco-color;
                border-color: #dee2e6;
            }
        }
    }

    .page-link{
        font-family: $main-ft;
        position: relative;
        display: block;
        padding: 0.5rem 0.75rem;
        margin-left: -1px;
        line-height: 1.25;
        color: #727679;
        background-color: #fff;
        border: 1px solid #FFF;

        &:hover {
            z-index: 2;
            color: #fff;
            text-decoration: none;
            background-color: #EE7800;
            border-color: #dee2e6;
        }

    }
    .page-link-arrow{
        position: relative;
        display: block;
        padding: 0.5rem 0.75rem;
        line-height: 1.25;
        color: #727679;
        background-color: #fff;
        border: 1px solid #fff;
        &:hover{
            text-decoration: none;
        }
    }
    .page-arrow {
        padding: 0.5rem 0;
    }
}

// <!--[[[[[[[[[[[[[[[[[ 公司搜尋結果(左區塊、右地圖)]]]]]]]]]]]]]]]]]  -->

.cyResult {
    &__context {
        h4 {
            color: $title-color;
            font-weight: bold;
            transition: all 300ms ease-in-out;
            @media screen and(max-width: 576px) {
                font-size: 1.125rem;
            }
        }
    }
    ul {
        color: $main-font-color;
        font-size: 0.875rem;
        span {
            color: $title-color;
            font-weight: bold;
            transition: all 300ms ease-in-out;
            @media screen and(max-width: 576px) {
                font-weight: normal;
            }
        }
    }
    &__more {
        padding: 2rem 1rem;
        cursor: pointer;
        text-align: center;
        color: #D4D4D4;
        transition: all 300ms ease-in-out;
        @media screen and(max-width: 576px) {
            padding: 1rem 0;
            text-align: left;
            font-size: 0.875rem;
        }
        &.is-hidden {
            display: none;
        }
    }
    &__otherInfo {
        margin: 0 0 1.5rem 0;
        display: none;
        &.is-open {
            display: block;
        }
    }
    &__img {
        margin: 0 0 0 1.5rem;
        transition: all 300ms ease-in-out;
        @media screen and(max-width: 576px) {
            margin: 0 0 0 0.5rem;
        }
    }
    &__collection {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        cursor: pointer;
        width: 100%;
        &__bgImg {
            height: 150px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            width: 48%;
            transition: all 300ms ease-in-out;
            @media screen and(max-width: 576px) {
                height: 110px;
            }
        }
    }
}
.cyCard {
    display: flex;
    margin: 1.5rem 0 0 0;
    transition: all 300ms ease-in-out;
    @media screen and(max-width: 576px) {
        margin: 0 0 1.5rem 0;
    }
    &__leader {
        width: 35%;
        max-width: 35%;
        transition: all 300ms ease-in-out;
        @media screen and(max-width: 576px) {
            width: 40%;
            max-width: 40%;
        }
        h6 {
            color: $title-color;
            font-size: 1.125rem;
            font-weight: bold;
            margin: 0;
        }
        > div {
            color: $main-font-color;
            font-size: 0.875rem;
        }
        &--3col {
            width: 30%;
            max-width: 25%;
            transition: all 300ms ease-in-out;
            @media screen and(max-width: 576px) {
                width: 40%;
                max-width: 40%;
                padding: 0 1rem 0 0;
            }
        }
    }
    &__info {
        width: 65%;
        max-width: 65%;
        padding: 0 0 0 1rem;
        border-left: 1px solid #EFEFEF;
        transition: all 300ms ease-in-out;
        @media screen and(max-width: 576px) {
            width: 60%;
            max-width: 60%;
        }
        &--3col {
            width: 45%;
            max-width: 40%;
            transition: all 300ms ease-in-out;
            @media screen and(max-width: 576px) {
                width: 60%;
                max-width: 60%;
                font-size: 0.875rem;
            }
        }
        > div {
            color: $main-deco-color;
            font-weight: bold;
            transition: all 300ms ease-in-out;
            @media screen and(max-width: 576px) {
                font-size: 0.875rem;
            }
        }
    }
    &__name {
        color: $main-deco-color;
        font-weight: bold;
        padding: 0 0 0 1rem;
        border-left: 1px solid #EFEFEF;
        &--3col {
            width: 100%;
            max-width: 100%;
            border-left: none;
            transition: all 300ms ease-in-out;
            @media screen and(max-width: 576px) {
                padding: 0;
                font-size: 0.875rem;
            }
        }
    }
    ul {
        color: $main-font-color;
        font-size: 0.875rem;
        span {
            color: $title-color;
            font-weight: bold;
        }
    }
    a {
        color: $main-deco-color;
        &:hover {
            color: inherit;
        }
    }
}
.cyBtn {
    @media screen and(max-width: 576px) {
        width: 94%;
        position: fixed;
        z-index: 1025;
        bottom: 0;
        background: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.75) 100%);
        padding: 1rem 2.55rem;
    }
    a {
        color: $btn-color;
        font-size: 1rem;
        font-weight: 600;
        border: 1px solid $btn-color;
        border-radius: 8px;
        padding: 0.8rem 0.75rem;
        background-color: #FFF;
        transition: all 300ms ease-in-out;
        &:hover {
            color: $btn-hover-color;
            border: 1px solid $btn-hover-color;
        }
    }
}

.map {
    iframe {
        height: 670px;
        transition: all 300ms ease-in-out;
        @media screen and(max-width: 576px) {
            height: 340px;
        }
    }
}

// <!--[[[[[[[[[[[[[[[[[ 表單 ]]]]]]]]]]]]]]]]]  -->

.lsForm {
    &__item {
        &:not(:first-child) {
            margin: 1.5rem 0 0 0;
        }
    }
    select {
        color: #909090;
        height: unset;
        padding: 0.825rem 0.75rem;
        &.form-control:focus {
            color: #909090;
        }
    }
}

/*webkit瀏覽器專用*/
.lsForm__item ::-webkit-input-placeholder {
    color: #909090;
    font-size: 1rem;
}
/*Firefox 4-18瀏覽器專用*/
.lsForm__item input::-moz-placeholder {
    color: #909090;
    font-size: 1rem;
}
/*Firefox 19+瀏覽器專用*/
.lsForm__item input::-moz-placeholder {
    color: #909090;
    font-size: 1rem;
}
/*IE10瀏覽器專用*/
.lsForm__item:-ms-input-placeholder {
    color: #909090;
    font-size: 1rem;
}

.pretty-select {
    /*移除箭頭樣式*/
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    /*改變右邊箭頭樣式*/
    background: url("../../images/icon/form-arrow.png") right 10px center transparent;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-color:#FFF;
}

.error {
    text-align: right;
    color: #dc3545 ;
    font-size: 80%;
}

// <!--[[[[[[[[[[[[[[[[[ 上傳 Logo 與個案 ]]]]]]]]]]]]]]]]]  -->

.uploadLogo {
    &__note {
        text-align: center;
        color: $main-font-color;
        font-size: 0.875rem;
    }
    &__msg {
        color: #B0B0B0;
        text-align: center;
        border: 1px solid #B0B0B0;
        border-radius: 8px;
        padding: 0.775rem 0.75rem;
    }
}

.caseUploadBgImg {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;

    > div {
        width: 48%;
    }

    &__bgImg {
        height: 180px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        width: 100%;
        transition: all 300ms ease-in-out;
        @media screen and(max-width: 576px) {
            height: 110px;
        }
    }
}

.progress {
    height: 0.5rem;
    .progress-bar {
        width: 0%;
        background-color: $main-deco-color;
    }
}

.progress-transition {
    transition: width 6s ease-in-out;
}

// <!--[[[[[[[[[[[[[[[[[ 免責聲明與隱私使用政策 ]]]]]]]]]]]]]]]]]  -->

.agreeForm {
    &__btn {
        padding: 0 1.2rem;
        a {
            color: $btn-color;
            font-size: 1rem;
            font-weight: 600;
            border: 1px solid $btn-color;
            border-radius: 8px;
            padding: 0.8rem 0.75rem;
            background-color: #FFF;
            transition: all 300ms ease-in-out;
            &:hover {
                color: $btn-hover-color;
                border: 1px solid $btn-hover-color;
            }
        }
    }
}

.custom-checkbox {
    font-size: 0.875rem;
    text-align: center;
    .custom-control-label {
        line-height: 1.7;
    }
    a {
        color: $main-deco-color;
        font-size: 100%;
    }
}

.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: #DE945C;
    background-color: #DE945C;
}


// Modal
.modal-body {
    text-align: center;
    color: $main-font-color;
    h4 {
        font-weight: bold;
        transition: all 300ms ease-in-out;
        @media screen and(max-width: 576px) {
            font-size: 1.125rem;
        }
    }
    p {
        font-size: 0.875rem;
    }
    .modal-fail-btn {
        display: flex;
        justify-content: space-around;
        a {
            width: 45%;
            font-size: 1rem;
        }
        .btn-back {
            color: #FFF;
            background-color: #AAAAAA;
        }
        .btn-restart {
            color: $main-deco-color;
            border: 1px solid $main-deco-color;
        }
    }
    .modal-btn {
        padding: 0 2.5rem;
        a {
            color: $btn-color;
            font-size: 1rem;
            font-weight: 600;
            border: 1px solid $btn-color;
            border-radius: 8px;
            padding: 0.45rem 0.75rem;
            background-color: #FFF;
            transition: all 300ms ease-in-out;
            &:hover {
                color: $btn-hover-color;
                border: 1px solid $btn-hover-color;
            }
        }
    }
}


// <!--[[[[[[[[[[[[[[[[[  footer  ]]]]]]]]]]]]]]]]]  -->

.footer {
    font-size: 0.9rem;
    color: $main-font-color;
    background-color: #eee;
    text-align: center;
    display: flex;
    justify-content: center;
    position: relative;
    transition: all 300ms ease-in-out;
    @media screen and(max-width: 576px) {
        &--mb {
            margin-bottom: 5rem;
        }
    }
    &__block {
        padding: 2rem 1rem;
        transition: all 300ms ease-in-out;
        @media screen and(max-width: 576px) {
            // padding: 1rem 1rem 1.9rem 1rem;
            padding: 2rem 1rem;
        }
    }
    a {
        font-size: 0.9rem;
        transition: all 300ms ease-in-out;
        @media screen and(max-width: 576px) {
            font-size: 0.8rem;
        }
        &:hover {
            color: $main-font-color;
        }
    }
}


.gotop-btn-wrapper {
    display: block;
    position: fixed;
    right: 20px;
    bottom: 40px;
    cursor: pointer;
    z-index: 1026;
    transition: all 300ms ease-in-out;
    @media screen and(max-width: 576px) {
        bottom: 75px;
    }

    .gotop-btn {
        width: 50px;
        height: 50px;
        box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
        opacity: 1;
        display: none;

        &:hover,
        &:active,
        &:focus {
            box-shadow: 5px 3px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        }
    }
}

[v-cloak] {
    display: none;
}