@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@400;500;600;&family=Noto+Sans+TC:wght@300;400;500;600;700&display=swap');
/*-------------------------------------------------------
    systemColor
--------------------------------------------------------*/
:root {
    --color-main: #02846A;
    --color-main-hover: #0AA284;
    --color-main-focus: #02745D;
    --color-dark: #120E0C;
    --color-orange: #F58D22;
    --color-purple:#963ED6;
    --color-red : #DB5138;
    --color-contact-blue : #0A94A8;
    --color-contact-green : #09A469;
    --color-contact-orange : #ED810F;


    --size_15: 0.9375rem;
    --size_16: 1rem;
    --size_18: 1.125rem;
    --size_20: 1.25rem;
    --size_22: 1.375rem;
    --size_24: 1.5rem;
    --size_25: 1.5625rem;
    --size_26: 1.625rem;
    --size_28: 1.75rem;
    --size_30: 1.875rem;
    --size_32: 2rem;
    --size_34: 2.125rem;
    --size_36: 2.25rem;
    --size_40: 2.5rem;
    --size_42: 2.625rem;
}

body {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Noto Sans TC",  sans-serif;
    background: #F5F5F5;
    color: var(--color-dark);
    overflow: hidden;
}
header {
    width: 100vw;
    height: 60px;
    position: fixed;
    background: #ffffff;
    z-index: 51;
}
header::after {
    content: '';
    display: block;
    width: 100vw;
    height: 4px;
    background: rgb(0,171,210);
    background: -moz-linear-gradient(90deg, rgba(0,171,210,1) 0%, rgba(33,199,172,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(0,171,210,1) 0%, rgba(33,199,172,1) 100%);
    background: linear-gradient(90deg, rgba(0,171,210,1) 0%, rgba(33,199,172,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00abd2",endColorstr="#21c7ac",GradientType=1);
    position: absolute;
    bottom: 0;
    left: 0;
}
header h1 {
    text-indent: -99999px;
    width: 228px;
    height: 55px;
    position: absolute;
    bottom: 4px;
    left: 6px;
    background: url(../images/clearMb_logo.svg);
    margin-bottom: 0;
}
.btn-standard {
    position: absolute;
    right: 0;
    color: var(--color-main);
    background: #FFF1AF;
    border-radius: 20px 0 0 20px;
    padding: 3px 5px 3px 12px;
    bottom: 15px;
}
.btn-standard:hover {
    text-decoration: none;
    color: var(--color-main);
    background: #f9ecad;
}
.btn-standard .far {
    margin-right: 3px;
}
.main-nav {
    width: 100vw;
    position: fixed;
    bottom: 0;
    background: #ffffff;
    font-size: var(--size_20);
    padding: 0;
    box-shadow: 2px 2px 4px 4px rgba(0, 0, 0, 0.1);
}
.main-nav .col {
    text-align: center;
}
.main-nav a {
    display: block;
    height: 70px;
    line-height: 70px;
}

.main-nav button {
    display: block;
    width: 100%;
    height: 70px;
    line-height: 70px;
    border: none;
    background: none;
}

.btn-contact , .btn-recycle {
    color: var(--color-dark);
}

.btn-contact .far , .btn-recycle .far {
    color: var(--color-main);
    margin-right: 4px;
    font-size: var(--size_22);
}
.btn-contact:hover , .btn-recycle:hover {
    color: var(--color-main);
    text-decoration: none;
}
.btn-contact:focus , .btn-recycle:focus {
    color: var(--color-main-focus);
}
.btn-searchpoint {
    color: var(--color-main);
    position: relative;
    padding: 8px 12px 0;
}
.btn-searchpoint .far {
    display: inline-block;
    background: var(--color-main);
    color: #ffffff;
    font-size: var(--size_26);
    width: 62px;
    height: 62px;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    position: absolute;
    border: 6px solid #ffffff;
    top: -34px;
}
.btn-searchpoint:hover {
    text-decoration: none;
    color: var(--color-main-hover); 
}
.btn-searchpoint:focus {
    text-decoration: none;
    color: var(--color-main-focus); 
}
.btn-searchpoint:hover .far {
    background: var(--color-main-hover);
}
.btn-searchpoint:focus .far {
    background: var(--color-main-focus);
}
.modal-header {
    border-bottom: 0;
    padding-bottom: 0;
}
.modal-footer {
    border-top: 0;
}
.modal-content {
    border: 0;
    border-radius: 10px;
}
.modal-content-full {
    height: auto;
    min-height: 100%;
    border-radius: 0;
}
.modal-dialog {
    padding: 0.75rem;
}
.modal-dialog-full
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    max-width: 100%;
}
#VersionModal .modal-body > p {
    font-size: var(--size_22);
    font-weight: 500;
    line-height: 1.5;
}
.btn-main, .btn-outline-main {
    font-size: var(--size_20);
    padding: 10px 12px;
}
.btn-main {
    background: var(--color-main);
    color: #ffffff;
}
.btn-main:hover {
    background: var(--color-main-hover);
    text-decoration: none; 
    color: #ffffff;
}
.btn-main:focus {
    background: var(--color-main-focus);
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(2,132,106,.25);
}
.btn-outline-main {
    color: var(--color-main);
    border-color: var(--color-main);
    background: #ffffff;
}
.btn-outline-main:hover {
    background: var(--color-main);
    color: #ffffff; 
    text-decoration: none; 
}
.btn-outline-main:focus {
    box-shadow: 0 0 0 0.2rem rgba(2,132,106,.25);
}
.modal-footer .btn + .btn {
    margin-top: 12px;
    margin-bottom: 1.5rem;
}
.wrapper {
    height: 100vh;
    padding-top: 60px;
    padding-bottom: 70px;
    position: relative;
}
#map {
    background: #dedede;
    height: 100%;
    position: relative;
}
.notice {
    color: #ffffff;   
    font-size: var(--size_18);
    background: rgba(0,0,0,.7);
    padding: 12px 16px;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    position: fixed;
    top: 60px;
    left: 0;
    z-index: 51;
}

.point-byroute.notyet, .point-temp.notyet {
    opacity: .25;  
}
.pointimg-byroute {  
    content: url(../images/icon_truck.svg);
}
.pointimg-limited{
    content: url(../images/icon_point.svg);
}
.pointimg-temp {
    content: url(../images/icon_temp.svg);    
}

.point-byroute, .point-limitedtime{
    display: inline-block;
    position: relative;
    text-align: center;
    padding-top: 34px;
    margin-left: -17px;
    margin-top: -17px;
    border: none;
    background: none;
}
.point-temp {
    display: inline-block;
    position: relative;
    text-align: center;
    border: none;
    background: none; 
    line-height: 1;
}

.point-byroute img, .point-limitedtime img {
    border-radius: 50%;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
}


.point-byroute > p {
    background: #ffffff;
    display: inline-block;
    border: 1px solid var(--color-orange);
    font-size: var(--size_20);
    color: var(--color-orange);
    border-radius: 4px;
    padding-right: 3px;
    line-height: 1.2;
    width: 82px;
    position: absolute;
    left: calc(-50% - 4px);
    top: 0;
    margin-bottom: 0;
}
.point-byroute p:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 6.5px 0 6.5px;
    border-color: var(--color-orange) transparent transparent transparent;
    position: absolute;
    left: calc(50% - 3px);
}


.point-byroute p span.estimate {
    font-size: var(--size_15);
    background: var(--color-orange);
    color: #ffffff;
    display: inline-block;
    height: 100%;
    padding: 4px;
    font-weight: 600;
    vertical-align: text-top;
    margin-right: 3px;
}
.point-limitedtime > p {
    background: #ffffff;
    display: inline-block;
    border: 1px solid var(--color-purple);
    font-size: var(--size_20);
    color: var(--color-purple);
    border-radius: 4px;
    line-height: 1.2;
    width: 76px;
    position: absolute;
    left: calc(-50% - 4px);
    padding-top: 2px;
    top: 0;
    margin-bottom: 0;
    font-weight: 600;
}
.point-limitedtime > p i {
    margin-left: 2px;
    margin-bottom: 2px;
}
.point-limitedtime p:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 6.5px 0 6.5px;
    border-color: var(--color-purple) transparent transparent transparent;
    position: absolute;
    left: calc(50% - 3px);
}
.point-byroute p:before, .point-limitedtime p:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 5px 0 5px;
    border-color: #ffffff transparent transparent transparent;
    position: absolute;
    bottom: -7px;
    left: calc(50% - 5px);
    z-index: 1;
}
h2.modal-title {
    font-size: var(--size_22);
    margin-bottom: 0;
    font-weight: 500;
    line-height: 1.2;
}
.modal-body h3 {
    color: var(--color-main);
    font-size: var(--size_18);
    margin: 1.5rem 0 10px;
}
.modal-body h3 .far {
    margin-right: 4px ;
}

.form-control {
    font-size: var(--size_18); 
    margin-bottom: 12px;
    padding: 1.55rem .75rem;
    color: var(--color-dark);
}
.form-control:focus {
    color: var(--color-dark);
    border-color: var(--color-main-hover);
    box-shadow: 0 0 0 0.2rem rgba(2,132,106,.25);
}
.custom-select {
    font-size: var(--size_18); 
    margin-bottom: 12px;
    padding: 1rem 1.75rem 1rem .75rem;
    color: var(--color-dark);
    height: auto;
}
.icon-locate {
    display: inline-block;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #DDDDDD;
    color: #ffffff;
    text-align: center;
    font-size: var(--size_15);
    line-height: 27px;
}
.search-history {
    padding-left: 0;
    list-style: none;
    margin-top: -.75rem;
}
.search-history li {
    border-bottom: 1px solid #C3C3C3;
    padding-top: .75rem;
    padding-bottom: .75rem;
}
.search-history li:last-child {
    border-bottom: 0;
}
.search-history .btn-delete {
    color: var(--color-main);
    font-size: var(--size_20);
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 1.25;
    border: none;
    background: none;
}
.search-history .btn-delete:hover {
    color: var(--color-main-hover);
    text-decoration: none;
}
.search-history .btn-delete:focus {
    color: var(--color-main-focus);
}
.search-history .form-row > .col {
    padding-left: 0;
    padding-right: 0;
}
.search-history .search-item {
    font-size: var(--size_20);
    color: var(--color-dark);
    line-height: 1.25;
    border: none;
    background: none;
}
.search-history .search-item:hover {
    text-decoration: none;
    color: var(--color-main);
}
.estimate-time {
    border: 1px solid #C3C3C3;
    border-radius: 4px ;
    padding: 12px;
    text-align: center;
    font-size: var(--size_20);
    margin-bottom: .5rem;
}
.estimate-time  span {
    display: block;
    font-size: var(--size_42);
    font-weight: 500;
    line-height: 1;
}
.schedule-time, .address {
    font-size: var(--size_20);
    font-weight: 500;
    margin-bottom: 0;
    line-height: 1.2;

}
.take-type {
    font-size: var(--size_20);
    padding-bottom: 20px;
}
.take-type > .col-6, .take-type > .col-12 {
    margin-bottom: 8px;
}
.take-type span.type-yes,  
.take-type span.type-no,
.take-type span.type-unknown{
    display: inline-block;
    width: 42px;
    height: 42px;
    color: #ffffff;
    text-align: center;
    line-height: 42px;
    border-radius: 50%;
    margin-right: 4px;
}
.take-type span.type-yes {
    background-color: var(--color-main);
}
.take-type span.type-no {
    background-color: var(--color-red);
}
.take-type span.type-unknown {
    background-color: var(--color-orange);
    color: var(--color-orange);
}
.take-type span.take-time {
    font-size: var(--size_24);
    font-weight: 500;
    margin-left: 5px;
}
.btn-updatetime {
    z-index: 10;
    position: fixed;
    bottom: 86px;
    left: 16px;
    display: inline-block;
    font-size: var(--size_16);
    padding: 8px 16px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0px 3px 6px rgba(0,0,0,.16);
    color: var(--color-main);
    line-height: 1;
    border: none;
}
.btn-updatetime i {
    margin-right: 4px;
}
.btn-updatetime:hover {
    background: var(--color-main);
    color: #ffffff;
    text-decoration: none;
}
.btn-updatetime:focus {
    background: var(--color-main-focus);
    color: #ffffff;
} 
/* contact */
.modal-content header h2 {
    text-indent: 0;
    width: 100vw;
    position: relative;
    background-image: none;
    text-align: center;
    color: var(--color-main);
    font-size: var(--size_24);
    left: inherit;
    bottom: inherit;
    line-height: 60px;
    font-weight: 400;
}
.modal-content header h2 .far {
    font-size: var(--size_32);
    margin-right: 5px;
    vertical-align: text-top;
}
.modal-content header .back {
    position: absolute;
    display: block;
    width: 70px;
    text-align: center;
    font-size: var(--size_15);
    color: var(--color-dark);
    left: 6px;
    top: 8px;
    line-height: 1.3;
    z-index: 1;
    background: none;
    border: none;
}
.modal-content header .back:hover {
    text-decoration: none;
    color: var(--color-main);
}
.modal-content header .back:focus {
    color: var(--color-dark);
}
.modal-content header .back .far {
    font-size: var(--size_24);
    display: block;
}
.modal-content .wrapper {
    padding-bottom: 0;
}
.modal-content .wrapper .content {
    padding: 1rem;
}
.modal-content .wrapper .content > h3 {
    font-size: var(--size_28);
    font-weight: 500;
}
.contact-list {
    padding-left: 0;
    list-style: none;
    margin-top: 1rem;
    margin-bottom: 2rem;
}
.contact-list li {
    margin-bottom: .5rem;
}
.contact-item {
    display: block;
    background: #ffffff;
    padding: 1rem;
    border-radius: 4px;
    box-shadow: 0px 3px 6px rgba(0,0,0,.16);
}
.contact-item:hover {
    text-decoration: none;
}
.contact-item p {
    line-height: 1.2;
}
.contact-title {
    margin-bottom: 0;
    font-size: var(--size_18);
    color: var(--color-dark);
}
.contact-number {
    font-size: var(--size_28);
    font-weight: 400;
    margin-bottom: 0;
}
.contact-item-team .contact-number {
    color: var(--color-contact-orange);
}
.contact-item-recycle .contact-number {
    color: var(--color-contact-blue);
}
.contact-item-bulky .contact-number {
    color: var(--color-contact-green);
}
.choose-area .btn {
    margin-bottom: .5rem;
}

.Tel1Icon {
    content: url(../images/icon_team.svg);
}

.Tel2Icon {
    content: url(../images/icon_recycle.svg);
}

.Tel3Icon {
    content: url(../images/icon_bulky.svg);
}
#ContactContent + .btn-outline-main {
    margin-left: 1rem;
    margin-right: 1rem;
    width: calc(100% - 2rem);
}
#OthersModal {
    z-index: 1060;
}
.modal-backdrop + .modal-backdrop {
    z-index: 1051;
}