﻿
/*進階搜尋單元*/

.googleBox {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.title_block {
    background-color: #e5ffeb;
    border-top: 1px solid #d1d1d1;
    border-bottom: 1px solid #60b77a;
}

.title_present {
    width: 990px;
    margin: 0 auto;
    position: relative;
    height: 77px;
}

    .title_present .iconpic {
        width: 122px;
        height: 80px;
        background: url("../images/img_searchmore.png") top left no-repeat;
        position: absolute;
        top: 0px;
        left: 0;
    }

    .title_present .iconpic_station {
        width: 122px;
        height: 80px;
        background: url("../images/img_search.png") top left no-repeat;
        position: absolute;
        top: 0px;
        left: 0;
    }

.title {
    font-size: 3em;
    color: #434343;
    margin-left: 138px;
    margin-top: 30px;
    vertical-align: middle;
    display: inline-block;
}

.title_block_station {
    background-color: #e5ffeb;
    border-top: 1px solid #d1d1d1;
    border-bottom: 1px solid #60b77a;
    width: 100%;
    position: relative; /*fixed;*/
    display: flex;
}

.searbar {
    font-size: 15px;
    background-color: #f6fff8;
    border-bottom: 1px solid #60b77a;
    width: 100%;
    padding: 10px 0 10px;
}

.searchItem {
    text-align: center;
    margin: 0 auto;
    font-family: Arial, Helvetica,sans-serif,"Microsoft JhengHei";
    font-size: 18px;
}

    .searchItem hr {
        display: none;
    }

.select1 {
    border: 1px solid #0099cb;
    height: 40px;
    padding: 8px 9px;
    font-size: 18px;
    line-height: 1;
    background-color: #FFF;
    cursor: pointer;
    display: inline-block;
    border: 1px solid #b7b7b7;
    border-radius: 3px;
    font-family: Arial, Helvetica,sans-serif,"Microsoft JhengHei";
}

.blueborder {
    width: 72px;
    padding: 8px 9px;
    font-size: 18px;
    line-height: 1;
    background-color: #FFF;
    cursor: pointer;
    display: inline-block;
    border: 1px solid #b7b7b7;
    border-radius: 3px;
    margin-bottom: 3px;
}

.basic {
}

    .basic:after {
        clear: both;
        content: '';
        display: block;
    }

.btn_search {
    background-color: #e1402d;
    border-radius: 10px;
    padding: 2px 8px;
    margin: 0 10px;
    font-size: 18px;
    padding: 5px 10px;
    line-height: 26px;
    outline: none;
    cursor: pointer;
}

.pic {
    width: 90px;
    margin: 0 8px 0 16px;
    float: left;
}

.info {
    width: 200px;
    float: left;
    font-size: 15px;
}

    .info h3 {
        margin-bottom: 10px;
    }

.distance {
    font-size: 16px;
    background: url(../images/icon_location.png) no-repeat;
    padding: 3px 3px 3px 40px;
    background-position: 16px 8px;
    line-height: 36px;
}

.innerdistance {
    font-size: 16px;
    padding: 3px 3px 3px 40px;
    background-position: 16px 8px;
    line-height: 36px;
}

.innerdistance_maker {
    font-size: 16px;
    padding: 3px 3px 3px 40px;
    background-position: 16px 8px;
    line-height: 36px;
}

.searchResult {
    height: 648px;
    overflow: hidden;
    position: relative;
}

.map {
    float: left;
    margin-right: 317px;
    width: 75%;
}

    .map iframe {
        height: 648px;
    }

.showItem {
    position: absolute;
    top: 0;
    right: 0;
    width: 25%; /*337px;*/
    vertical-align: middle;
    max-height: 648px;
    overflow-y: hidden;
    font-family: Arial, Helvetica,sans-serif,"Microsoft JhengHei";
}
    .showItem:hover {
        max-height: 648px;
        overflow-y: scroll;
        /* cursor: pointer; */
        /* cursor: url("../images/up-down.cur"), default; */
    }

    .showItem a {
        color: #2e2e2e;
        text-decoration: underline;
    }

.item {
    border-bottom: 1px solid #ffae00;
    /* height: 216px; */
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(top, #FFFDE0 0%, #FFF58E 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #FFFDE0 0%, #FFF58E 100%);
    /* Opera */
    background-image: -o-linear-gradient(top, #FFFDE0 0%, #FFF58E 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFDE0), color-stop(1, #FFF58E));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, #FFFDE0 0%, #FFF58E 100%);
    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to bottom, #FFFDE0 0%, #FFF58E 100%);
}

.inneritem {
    border-bottom: 1px solid #ffae00;
    height: 170px;
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(top, #FFFDE0 0%, #FFF58E 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #FFFDE0 0%, #FFF58E 100%);
    /* Opera */
    background-image: -o-linear-gradient(top, #FFFDE0 0%, #FFF58E 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFDE0), color-stop(1, #FFF58E));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, #FFFDE0 0%, #FFF58E 100%);
    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to bottom, #FFFDE0 0%, #FFF58E 100%);
}

.inneritem_maker {
    border-bottom: 1px solid #ffae00;
    max-width: 400px;
    max-height: 400px;
    font-family: Arial, Helvetica,sans-serif,"Microsoft JhengHei";
}

.tag {
    width: 80%;
    margin: 10px auto 0;
    background: url(../images/tag_icon.png) no-repeat;
    background-position: 5px 5px;
    padding-left: 30px;
}

.shape {
    padding: 3px 10px;
    border-radius: 25px;
    border: 2px solid #000;
    display: inline-block;
    background-color: #fff;
    margin-bottom: 5px;
}

.coffeeBorder {
    border-color: #622a00;
    background-color: #fff1ea;
}

.redBorder {
    border-color: #f43734;
    background-color: #ffe6e6;
}

.purpleBorder {
    border-color: #960de4;
    background-color: #f9ebff;
}

.blueBorder {
    border-color: #0d8bec;
    background-color: #ebfaff;
}

.greenBorder {
    border-color: #00d5a0;
    background-color: #ebfff5;
}

.orangeBorder {
    border-color: #ff6c00;
    background-color: #fff3d9;
}

.red {
    color: #f43734;
    font-size: 18px;
}

.middle {
    vertical-align: middle;
}

.show {
    display: inline-block;
    font-size: 18px;
    margin-top: 10px;
    margin-left: 10px;
}

.btn1, .radius_left {
    padding: 5px 10px;
    border: 1px solid #b8b8b8;
    display: inline-block;
    font-size: 18px;
    background: #fff;
    cursor: pointer;
}

.greenBtn {
    /*    background: linear-gradient(to bottom, #8fcc36 0, #75b615 100%);*/
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(top, #FFFFFF 0%, #9DDE00 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #9DDE00 100%);
    /* Opera */
    background-image: -o-linear-gradient(top, #FFFFFF 0%, #9DDE00 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #9DDE00));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #9DDE00 100%);
    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #9DDE00 100%);
}

.yellowBtn {
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(top, #FFFFFF 0%, #F9E648 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #F9E648 100%);
    /* Opera */
    background-image: -o-linear-gradient(top, #FFFFFF 0%, #F9E648 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #F9E648));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #F9E648 100%);
    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #F9E648 100%);
}

.redBtn {
    font-family: Arial, Helvetica,sans-serif,"Microsoft JhengHei";
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(top, #FFFFFF 0%, #F76452 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #F76452 100%);
    /* Opera */
    background-image: -o-linear-gradient(top, #FFFFFF 0%, #F76452 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #F76452));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #F76452 100%);
    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #F76452 100%);
}

.radius_left {
    border-radius: 5px 0 0 5px;
}

.radius_right {
    border-radius: 0 5px 5px 0;
}

.store {
    font-size: 1.4em;
    width: 80%;
    margin: 0 auto;
}

.store_detail2 {
    width: 100%;
}

.martop1 {
    margin-top: 20px;
}

.marbottom1 {
    margin-bottom: 40px;
}

.table3 {
    width: 90%;
    font-size: inherit;
    border: 1px solid #0090e3;
    box-shadow: 3px 3px 0 3px #e5e5e5;
    margin-bottom: 30px;
}

    .table3 th, .table3 td {
        padding: 9px 0;
        border-bottom: 1px solid #e2e2e2;
        border-top: 1px solid #fff;
        text-align: left;
    }

    .table3 th {
        background: #a1f6ff;
        padding: 10px;
        border-bottom: 1px solid #0090e3;
    }

    .table3 td {
        padding: 10px;
        box-sizing: border-box;
    }

    .table3 tr:nth-child(odd) {
        background: #ecfdff;
    }

.tableTitle {
    background: #0090e3;
    width: 150px;
    text-align: center;
    padding: 8px;
    border-radius: 5px 5px 0 0;
    color: #fff;
}

.ft18 {
    font-size: 18px;
}

@media (min-width: 988px)and (max-width:1300px) {
    .searchItem {
        width: 90%;
        margin: 0 auto;
        text-align: left;
    }
}

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

    .store_list li img {
        width: 100%;
    }

    .title_present {
        width: 100%;
        position: relative;
        height: 53px;
        text-align: center;
        position: relative;
    }

        .title_present .iconpic {
            width: 80px;
            height: 52px;
            background: url("../images/img_searchmore.png") top left no-repeat;
            background-size: cover;
            display: inline-block;
            position: relative;
            top: 1px;
            left: -2px;
            vertical-align: middle;
            z-index: 90;
        }

        .title_present .iconpic_station {
            width: 80px;
            height: 52px;
            background: url("../images/img_search.png") top left no-repeat;
            background-size: cover;
            display: inline-block;
            position: relative;
            top: 1px;
            left: -2px;
            vertical-align: middle;
            z-index: 90;
        }



    .title {
        font-size: 2.1em;
        color: #434343;
        vertical-align: middle;
        display: inline-block;
        margin: 10px 0 0 5px;
        font-weight: bold;
    }
}

@media (max-width: 768px) {
    .title_present {
        width: 100%;
        position: relative;
        height: 53px;
        text-align: center;
        position: relative;
    }

        .title_present .iconpic {
            width: 80px;
            height: 52px;
            background: url("../images/img_searchmore.png") top left no-repeat;
            background-size: cover;
            display: inline-block;
            position: relative;
            top: 1px;
            left: -2px;
            vertical-align: middle;
            z-index: 90;
        }

        .title_present .iconpic_station {
            width: 80px;
            height: 52px;
            background: url("../images/img_search.png") top left no-repeat;
            background-size: cover;
            display: inline-block;
            position: relative;
            top: 1px;
            left: -2px;
            vertical-align: middle;
            z-index: 90;
        }

    .title {
        font-size: 2.1em;
        color: #434343;
        vertical-align: middle;
        display: inline-block;
        margin: 10px 0 0 5px;
        font-weight: bold;
    }

    .searbar {
        height: auto;
        padding-bottom: 16px;
        padding: 50px 0 10px;
    }

    .searchItem {
        width: 96%;
        margin: 0 auto;
        line-height: 2;
        text-align: center;
    }

        .searchItem hr {
            display: block;
        }

    .searchResult {
        position: relative;
    }

    .map {
        height: 400px;
        width: 100%;
        display: block;
        float: none;
    }

    .showItem {
        position: relative;
        display: block;
        width: 100%;
    }

    .searchResult {
        height: auto;
        position: relative;
    }

    .map iframe {
        height: 400px;
    }

    .show {
        display: block;
        margin-top: 10px;
    }

    .show {
        display: inline-block;
        font-size: 15px;
        margin-top: 10px;
        margin-left: 10px;
    }

    .btn1, .radius_left {
        padding: 5px 10px;
        border: 1px solid #b8b8b8;
        display: inline-block;
        font-size: 16px;
        background: #fff;
        cursor: pointer;
    }

    .select1 {
        font-size: 16px;
    }

    .blueborder {
        width: 50px;
        font-size: 16px;
        height: 20px;
    }

    .btn_search {
        background-color: #e1402d;
        border-radius: 4px;
        padding: 2px 8px;
        margin: 0 10px;
        font-size: 16px;
        line-height: 26px;
        outline: none;
        cursor: pointer;
    }

    .greenBtn {
        /*    background: linear-gradient(to bottom, #8fcc36 0, #75b615 100%);*/
        /* IE10 Consumer Preview */
        background-image: -ms-linear-gradient(top, #FFFFFF 0%, #9DDE00 100%);
        /* Mozilla Firefox */
        background-image: -moz-linear-gradient(top, #FFFFFF 0%, #9DDE00 100%);
        /* Opera */
        background-image: -o-linear-gradient(top, #FFFFFF 0%, #9DDE00 100%);
        /* Webkit (Safari/Chrome 10) */
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #9DDE00));
        /* Webkit (Chrome 11+) */
        background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #9DDE00 100%);
        /* W3C Markup, IE10 Release Preview */
        background-image: linear-gradient(to bottom, #FFFFFF 0%, #9DDE00 100%);
    }

    .yellowBtn {
        /* IE10 Consumer Preview */
        background-image: -ms-linear-gradient(top, #FFFFFF 0%, #F9E648 100%);
        /* Mozilla Firefox */
        background-image: -moz-linear-gradient(top, #FFFFFF 0%, #F9E648 100%);
        /* Opera */
        background-image: -o-linear-gradient(top, #FFFFFF 0%, #F9E648 100%);
        /* Webkit (Safari/Chrome 10) */
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #F9E648));
        /* Webkit (Chrome 11+) */
        background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #F9E648 100%);
        /* W3C Markup, IE10 Release Preview */
        background-image: linear-gradient(to bottom, #FFFFFF 0%, #F9E648 100%);
    }

    .redBtn {
        /* IE10 Consumer Preview */
        background-image: -ms-linear-gradient(top, #FFFFFF 0%, #F76452 100%);
        /* Mozilla Firefox */
        background-image: -moz-linear-gradient(top, #FFFFFF 0%, #F76452 100%);
        /* Opera */
        background-image: -o-linear-gradient(top, #FFFFFF 0%, #F76452 100%);
        /* Webkit (Safari/Chrome 10) */
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #F76452));
        /* Webkit (Chrome 11+) */
        background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #F76452 100%);
        /* W3C Markup, IE10 Release Preview */
        background-image: linear-gradient(to bottom, #FFFFFF 0%, #F76452 100%);
    }
}
