﻿/*
 * Extracted from css/widget.css, lines 43672-43913
 * Region label: CI-029
 */
    /* #region CI-029 */
    .ci-029 .announce .card {
        background-color: #fff;
        border-radius: 3px;
        box-shadow: 1px 2px 20px 0 rgba(35, 19, 18, .05);
        border: 0;
        padding-bottom: 46px;
        /*padding: 24px;
        margin-bottom: 16px;
        border: 4px solid #fff !important;*/
        transition: all .6s ease-in-out;
    }

        .ci-029 .announce .card.yellow {
            background-color: #fff;
            border-radius: 3px;
            /*box-shadow: 1px 2px 20px 0 rgba(35, 19, 18, .05);*/
            box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 10px 0px;
            border: 0;
            padding: 12px;
            padding-bottom: 20px;
            margin-bottom: 16px;
            border: 4px solid #fff !important;
            transition: all .6s ease-in-out;
        }


        .ci-029 .announce .card.yellow:hover {
            border: 4px solid #ffd400 !important;
        }

        .ci-029 .announce .card h3 {
            margin-bottom: 32px;
        }

        .ci-029 .announce .card .item .announce-title {
            color: #222;
            font-family: Krungsri-Condensed-Medium;
            font-size: 16px;
            line-height: 26px;
        }

        .ci-029 .announce .card .item .announce-date {
            color: #949494;
            font-family: Thongterm-Roman;
            font-size: 14px;
            line-height: 26px;
        }

    .ci-029 .text-ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ci-029 .row {
        text-align: unset !important;
        margin-bottom: auto !important;
        display: flex;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    }

    .ci-029 .col-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .ci-029 .p-0 {
        padding: 0 !important;
    }

    @media (min-width: 768px) {
        .ci-029 .col-md-9 {
            flex: 0 0 75%;
            max-width: 75%;
        }

        .ci-029 .text-md-right {
            text-align: right !important;
        }

        .ci-029 .col-md-3 {
            flex: 0 0 25%;
            max-width: 25%;
        }

        .ci-029 .announce .card .item .announce-line {
            border-bottom: 1px solid #e8e8e8;
            margin: 24px 0;
            width: 100%;
        }
    }

    @media (max-width: 768px) {
        .ci-029 .announce .card {
            padding: 16px;
        }

            .ci-029 .announce .card h3 {
                margin-bottom: 11px;
            }

        .ci-029 .Text-link {
            font-size: 14px !important;
            line-height: 26px !important;
        }

        .ci-029 .moblie-line {
            border-bottom: 1px solid #e8e8e8;
            margin-bottom: 16px;
            width: 100%;
        }
    }

    .ci-029 .announce .Text-link,
    .ci-029 .Text-link a {
        color: #F76F00;
        font-family: Thongterm-Roman;
        font-size: 16px;
        line-height: 34px;
    }

    .ci-029 .container--news {
        margin-bottom: 54px
    }

        .ci-029 .container--news .announce .card {
            background-color: #fff;
            border-radius: 3px;
            box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, .1);
            border: 0;
            padding: 12px 12px 20px 12px;
            border: 4px solid #fff !important;
            transition: all .6s ease-in-out
        }

            .ci-029 .container--news .announce .card.yellow:hover {
                border: 4px solid #ffd400 !important
            }

            .ci-029 .container--news .announce .card h3 {
                margin-bottom: 24px
            }

            .ci-029 .container--news .announce .card .item .announce-title {
                color: #222;
                font-family: Krungsri-Condensed-Medium;
                font-size: 16px;
                letter-spacing: 0;
                line-height: 26px
            }

            .ci-029 .container--news .announce .card .item .announce-date {
                color: #949494;
                font-family: Thongterm-Roman;
                font-size: 14px;
                letter-spacing: 0;
                line-height: 26px
            }

            .ci-029 .container--news .announce .card .item .announce-line {
                border-bottom: 1px solid #e8e8e8;
                margin-top: 24px;
                margin-bottom: 24px;
                width: 100%
            }

            .ci-029.container--news .announce .card .item:last-child .announce-line {
                display: none
            }

        .ci-029.container--news .news .card {
            background-color: #fff;
            border-radius: 3px;
            box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, .1);
            border: 0;
            padding: 12px 12px 22px 12px;
            border: 4px solid #fff !important;
            transition: all .6s ease-in-out
        }

            .ci-029 .container--news .news .card:hover {
                border: 4px solid #ffd400 !important
            }

            .ci-029 .container--news .news .card h3 {
                margin-bottom: 24px
            }

            .ci-029.container--news .news .card .text-title {
                font-family: Krungsri-Condensed-Medium;
                color: #222;
                font-size: 16px;
                line-height: 24px !important;
                margin-bottom: 8px
            }

            .ci-029 .container--news .news .card .text-detail {
                color: #5a5a5a;
                font-family: Thongterm-Roman;
                font-size: 14px !important;
                letter-spacing: 0;
                line-height: 26px !important;
                padding-top: 0 !important
            }

    .ci-029 .Text-link.underline:hover {
        text-decoration: underline !important
    }

    @media(max-width: 767px) {
        .ci-029 .container--news .announce .card {
            padding: 12px 12px 9px 12px;
            box-shadow: 1px 2px 10px 0 rgba(35, 19, 18, .1)
        }

            .ci-029 .container--news .announce .card h3 {
                margin-bottom: 16px
            }

            .ci-029 .container--news .announce .card .item .announce-title {
                font-family: Krungsri-Condensed;
                line-height: 27px;
                padding-bottom: 4px !important
            }

                .ci-029 .container--news .announce .card .item .announce-title.text-ellipsis {
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    white-space: normal
                }

            .ci-029 .container--news .announce .card .item .announce-date {
                line-height: 29px
            }
    }

    /* #endregion CI-029 */
