@import 'https://fonts.googleapis.com/css?family=Kanit|Prompt';
@import 'https://fonts.googleapis.com/css2?family=Sarabun:wght@100&display=swap';

.my-bg-mfu {
    background-color: #f7ca7c !important; /*เปลี่ยนสีแถบควบคุมเว็บไซต์*/
    color: #595959
}

.my-bg-mfu2 {
    background-color: #fffced; /*เปลี่ยนสีพื้นหลังเว็บไซต์*/
}

.my-btn-link {
    font-weight: 400;
    color: dimgray;
    text-decoration: none;
}

    .my-btn-link:hover {
        color: #f7ca7c;
        text-decoration: none;
    }

    .my-btn-link.focus, .btn-link:focus {
        text-decoration: underline;
        border: none;
    }

    .my-btn-link.disabled, .btn-link:disabled {
        color: #6c757d;
        pointer-events: none;
        border: none;
    }

.my-a:link {
    color: dimgray;
}

.my-a:hover {
    color: Highlight;
    text-decoration: none;
}

.my-a:active {
    color: darkgrey;
}

.my-a:visited {
    color: darkgrey;
}

.my-a-dark:link {
    color: #ebebeb;
}

.my-a-dark:hover {
    color: #ededed;
}

.my-a-dark:active {
    color: #ebebeb;
}

.my-a-dark:visited {
    color: #ebebeb;
}

.my-font {
    font-family: 'Kanit', sans-serif;
}

.my-font-sarabun {
    font-family: 'Sarabun', sans-serif;
}

.my-autosize-img {
    width: 100%;
    max-width: 100%;
    height: auto !important;
}

.my-img-zoom {
    transition: transform .2s;
}

    .my-img-zoom:hover {
        transform: scale(1.1);
    }


.my-table-bordered {
    border: 1px solid #000000
}

    .my-table-bordered td, .my-table-bordered th {
        border: 1px solid #000000
    }

    .my-table-bordered thead td, .my-table-bordered thead th {
        border-bottom-width: 2px
    }



/*----Timeline---*/
.main-timeline {
    position: relative;
}

    .main-timeline:after {
        content: '';
        display: block;
        clear: both;
    }

    .main-timeline .timeline {
        width: 50%;
        margin: 0 0 20px 20px;
        float: right;
    }

    .main-timeline .timeline-content {
        text-align: center;
        padding: 20px 20px 20px 100px;
        border-radius: 0 20px 20px 0;
        box-shadow: 0 5px 5px rgba(0,0,0,0.3);
        display: block;
        position: relative;
    }

        .main-timeline .timeline-content:hover {
            text-decoration: none;
        }

    .main-timeline .timeline-year {
        color: black;
        font-size: 35px;
        font-weight: 600;
        text-align:center;
        line-height: 100px;
        width: 130px;
        height: 100%;
        border-radius: 98px 0 0 10px;
        box-shadow: 0 5px 5px rgba(0,0,0,0.3);
        position: absolute;
        left: -130px;
        top: 0;
    }

    .main-timeline .timeline-icon {
        font-size: 50px;
        transform: translateY(-50%);
        position: absolute;
        left: 30px;
        top: 50%;
    }

    .main-timeline .title {
        font-size: 20px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0 0 5px;
    }

    .main-timeline .description {
        font-size: 13px;
        letter-spacing: 1px;
        margin: 0;
    }

    .main-timeline .timeline:nth-child(even) {
        float: left;
        margin: 0 20px 20px 0;
    }

        .main-timeline .timeline:nth-child(even) .timeline-content {
            padding: 20px 100px 20px 20px;
            border-radius: 20px 0 0 20px;
        }

            .main-timeline .timeline:nth-child(even) .timeline-content:before {
                right: auto;
                left: 0;
                clip-path: polygon(0 0, 100% 100%, 65% 0);
            }

        .main-timeline .timeline:nth-child(even) .timeline-year {
            left: auto;
            right: -130px;
            border-radius: 0 98px 10px 0;
        }

        .main-timeline .timeline:nth-child(even) .timeline-icon {
            right: 30px;
            left: auto;
        }

@media screen and (max-width:767px) {
    .main-timeline .timeline {
        width: 100%;
        padding: 50px 0 0 0;
    }

        .main-timeline .timeline .timeline-content,
        .main-timeline .timeline:nth-child(even) .timeline-content {
            padding: 20px 15px 20px 60px;
            border-radius: 0 20px 20px 20px;
        }

        .main-timeline .timeline .timeline-year,
        .main-timeline .timeline:nth-child(even) .timeline-year {
            font-size: 25px;
            border-radius: 15px 15px 0 0;
            box-shadow: none;
            width: 100px;
            height: 50px;
            line-height: 50px;
            top: -50px;
            left: 0;
        }

        .main-timeline .timeline .timeline-icon,
        .main-timeline .timeline:nth-child(even) .timeline-icon {
            font-size: 28px;
            left: 15px;
            right: auto;
        }
}

@media screen and (max-width:576px) {
    .main-timeline .title {
        font-size: 18px;
    }
}