/*----self-made horizontal line------*/

.horizontal-line {
    position: relative;
    display: block;
    height: 2px;
    background-color: #d3c7be;
}

.horizontal-line::before,
.horizontal-line::after {
    content: "";
    position: absolute;
    display: block;
    --width: 13px;
    --height: 12px;
    width: var(--width);
    height: var(--height);
    background-image: url(../images/_common/horizontalLine/horizontal-line-point.png);
    background-size: 100% 100%;
    transform: translateY(-50%);
    top: 50%;
}

.horizontal-line::before {
    left: calc(var(--height) * -0.5);
}

.horizontal-line::after {
    right: calc(var(--height) * -0.5);
}


/*-------------------small tablet & mobile (width <= 650px)------------------*/
/*通常版型會轉為側邊欄收縮或簡化的設計*/

@media (max-width: 650px) {
    .horizontal-line {
        height: 1.5px;
    }

    .horizontal-line::before,
    .horizontal-line::after {
        --width: 6.5px;
        --height: 6px;
    }
}