/* about.css */
/* 此為關於桓基共用style樣式, 頁面:公司簡介、服務據點、經銷夥伴、獲獎榮耀、里程碑 */
/* 包含: about-item、locations-item、timeline */ 


.about-page-link{
    color: #3FA2D4 !important;
}


/* about-item */
.about-item{
    background: #FFF;
    filter: drop-shadow(0px 6px 10px rgba(0, 0, 0, 0.10));
    border-radius: 10px;
    padding: 35px 45px;
    margin-top: 20px;
    margin-bottom: 50px;
    color: #5E5E5E;
    text-align: justify;
    line-height: 2.25em
}
.about-item-title{
    color: #3FA2D4;
    font-size: 1.3em;
    font-weight: 700;
    line-height: 1.8em;
}
.about-item p{
    text-indent: 2em;
}
.about-item-img{
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-item-img img{
    width: fit-content;
}
ol.brackets-order-list{
    list-style: none;
    padding-left: 55px;
}
ol.brackets-order-list li {
    /*  使用自訂標號  */
    counter-increment: my-counter;
    /* 段落首行縮排 */
    text-indent: -1em;
}
ol.brackets-order-list li::before {
    content: "（"counter(my-counter, trad-chinese-informal) "）";
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-left: -25px;
    margin-right: 10px;
}
ol.brackets-order-list2{
    list-style: none;
    padding-left: 55px;
}
ol.brackets-order-list2 li {
    /*  使用自訂標號  */
    counter-increment: my-counter;
    /* 段落首行縮排 */
    text-indent: -1em;
}
ol.brackets-order-list2 li::before {
    content: counter(my-counter, trad-chinese-informal)"、" ;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-left: -25px;
    margin-right: 10px;
}

/* locations-item */
.locations-item{
    display: flex;
    align-items: start;
    justify-content: space-between;
    background: #FFF;
    border-radius: 10px;
    filter: drop-shadow(0px 6px 10px rgba(0, 0, 0, 0.10));
    padding: 30px;
    margin-top: 20px;
}
.locations-item-content{
    margin-right: 30px;
    word-break: break-word;
}
.locations-item-content > div{
    margin: 15px 0px;
    color: #5E5E5E;
}
.locations-item-content img{
    width: fit-content;
    height: fit-content;
}
.locations-item-map{
    display: flex;
    justify-content: flex-end;
}
.locations-item-map iframe{
    width: 450px;
    height: 270px;
}


/* timeline */
.timeline{
    margin-top: 30px;
}
.timeline-table tr td{
    padding-top: 15px;
    padding-bottom: 15px;
}
.timeline-table tr td:first-child{
    border-right: 3px solid #E0E0E0;
    text-align: right;
    padding-right: 36px;
}
.timeline-table tr td:last-child{
    padding-left: 36px;
}
.timeline-empty .timeline-year{
    color: #6A439B;
    font-size: 1.5em;
    font-weight: 700;
    text-wrap: nowrap;
    line-height: 36px;
    &:after{
        content: "\f017";
        font-family: "Font Awesome 6 Free";
        position: absolute;
        width: 36px;
        height: 36px;
        font-size: 22px;
        line-height: 22px;
        text-align: center;
        padding: 5px;
        margin-left: 20px;
        color: #FCEAD2;
        background-color: #F89E15;
        border-radius: 50px;
        border: 2px solid #E0E0E0;
    }
}
.timeline-list .timeline-year{
    color: #F89E15;
    font-size: 1.1em;
    font-weight: 700;
}
.timeline-list .timeline-content{
    font-size: 1.1em;
    font-weight: 600;
    display: flex;
    align-items: center;
    text-align: justify;
    &:before{
        content: "\f192";
        font-family: "Font Awesome 6 Free";
        position: absolute;
        width: 26px;
        height: 26px;
        font-size: 15px;
        line-height: 18px;
        text-align: center;
        padding: 4px 0px;
        margin-left: -50px;
        color: #FCEAD2;
        background-color: #F89E15;
        border-radius: 50px;
        border: 1px solid #E0E0E0;
    }
    &:hover:before {
        transform: scale(1.2);
        background-color: #FCEAD2;
        color: #F89E15;
    }
}



@media( max-width: 992px ){
    .locations-main-container{
        width: 90%;
    }
    .milestone-main-container{
        width: 90%;
    }
    .locations-item-map iframe{
        width: 100%;
    }
}
@media( max-width: 768px ){
    .about-item{
        padding: 15px 20px;
    }
    .about-item-img img{
        width: 90%;
    }
    .locations-item{
        display: block;
    }
    .locations-item-content{
        
        margin-bottom: 30px;
    }
    .locations-item-map iframe{
        width: 100%;
        height: 270px;
    }
}
@media( max-width: 576px ){
    .about-item-img{
        padding: 40px 10px;
    }
    .about-item-img img{
        width: 100%;
    }
    .timeline-table tr td:first-child{
        padding-right: 24px;
    }
    .timeline-table tr td:last-child{
        padding-left: 24px;
    }
    .timeline-empty .timeline-year{
        font-size: 1.2em;
        &:after{
            margin-left: 8px;
        }
    }
    .timeline-list .timeline-content{
        font-size: 1.05em;
        &:before {
            margin-left: -38px;
        }
    }
    .timeline-list .timeline-year{
        font-size: 1.05em;
    }
}