/* 템플릿 공통 */
#panSectionType {
    margin-bottom: 30px;
}

[class^="section-type"] {
    width: 100%;
    box-sizing: border-box;
    position:relative;
}

[class^="section-type"] ul {
    margin-top:20px;
    position:relative;
}

    [class^="section-type"] .writername,
    [class^="section-type"] .a-categoryname,
    [class^="section-type"] .categoryname {
        display: none !important;
    }


/* 박스 템플릿1 스타일 (상단 이미지 1단) */
[class^="section-type1"] ul li {
    box-sizing: border-box;
    background-color: #fff;
    border-bottom:1px solid #e5e5e5;
    margin-bottom:15px;
}

    [class^="section-type1"] ul li div {
        display: none;
    }

[class^="section-type1"] li a {
    display: block;
    position: relative;
}

    [class^="section-type1"] li a figure.image-wrapper {
        width: 100%;
        padding-top: 56.25%;
        position: relative;
        overflow: hidden;
    }

[class^="section-type1"] ul li img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[class^="section-type1"] ul li span {
    margin: 15px 0; 
    position: relative;
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #555;
}

[class^="section-type1"] ul li .writername,
[class^="section-type1"] ul li p.categoryname {
    padding: 0 15px 12px;
    font-size: 0.75rem;
    color: #afafaf;
}

[class^="section-type"] ul li:nth-of-type(1){
    padding-top:0;
}

/* 박스 템플릿2 스타일 (좌측 이미지) */
[class^="section-type2"] {
    margin: 0 auto;
}

    [class^="section-type2"] ul {
        list-style: none;
        padding: 0;
    }

        [class^="section-type2"] ul li {
            display: flex;
            align-items: center;
            /*border: 1px solid #e5e5e5;*/
            padding: 15px 0;
            /*box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);*/
            transition: box-shadow 0.3s ease;
            font-size: 16px;
            width: 100%;
            border-bottom: 1px solid #e5e5e5;
        }

            [class^="section-type2"] ul li div {
                display: none;
            }

            [class^="section-type2"] ul li a {
                width: 100%;
                display: flex;
                display: -webkit-box;
                display: -webkit-flex;
                flex-wrap: nowrap;
            }

    [class^="section-type2"] li:hover {
        /*box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);*/
    }

    /* 이미지 스타일 */
    [class^="section-type2"] li figure {
        margin-right: 15px;
        min-width:100px;
        width: 100px;
        height: 75px;
    }

    [class^="section-type2"] li img {
        width:100%;
        height: 100%;
        border: 1px solid #cccccc;
        object-fit: cover;
    }

    /* 텍스트 스타일 */
    [class^="section-type2"] li span {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-box-orient: vertical;
        font-size: 16px;
        font-weight: normal;
        color: #555555;
        line-height: 1.27;
        overflow:hidden;
    }

    /* 기사 제목과 간격 */
    [class^="section-type2"] li span {
        margin-bottom: 12px;
    }

    /*[class^="section-type2"] .writername {
        font-size: 14px;
        color: #888;
    }

    [class^="section-type2"] .categoryname {
        font-size: 14px;
        color: #555;
        text-align: right;
    }*/

    /*[class^="section-type2"] li div {
        font-size: 20px;
        font-weight: bold;
        margin-right: 10px;
        color: #666;
    }*/



/* 박스 템플릿3 스타일 (텍스트) */
[class^="section-type3"] {
    width: 100%;
    margin-bottom: 20px;
}

    [class^="section-type3"] ul {
        list-style: none;
    }

        [class^="section-type3"] ul li {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
        }

            [class^="section-type3"] ul li div {
                background-color: #fcba2d;
                width: 22px;
                height: 22px;
                font-size: 16px;
                font-weight: bold;
                color: #ffffff;
                text-align: center;
                line-height: 21px;
                margin-right: 10px;
                border-radius: 3px;
            }

            [class^="section-type3"] ul li:nth-child(n+4) div {
                background-color: #e5e5e5;
                color: #111111;
            }

            [class^="section-type3"] ul li a {
                text-decoration: none;
                color: inherit;
                flex: 1;
            }

                [class^="section-type3"] ul li a figure.image-wrapper {
                    display:none;
                }

                [class^="section-type3"] ul li a img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    /*position: absolute;*/
                    top: 0;
                    left: 0;
                }

                [class^="section-type3"] ul li a span {
                    display: block;
                    font-size: 16px;
                    font-weight: 500;
                    color: #555555;
                    margin-bottom: 5px;
                }

            [class^="section-type3"] ul li .writername {
                font-size: 14px;
                color: #888888;
            }

            [class^="section-type3"] ul li .a-categoryname {
                text-decoration: none;
            }

            [class^="section-type3"] ul li .categoryname {
                font-size: 14px;
                color: #888888;
            }





/* 박스 템플릿4 스타일 (우측 이미지) */
[class^="section-type4"] {
    max-width: 720px;
    margin: 0 auto;
}

    [class^="section-type4"] ul {
        list-style: none;
        padding: 0;
    }

        [class^="section-type4"] ul li {
            display: flex;
            align-items: center;
            /*border: 1px solid #e5e5e5;*/
            padding: 15px 0;
            /*box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);*/
            transition: box-shadow 0.3s ease;
            font-size: 16px;
            width: 100%;
            border-bottom: 1px solid #e5e5e5;
        }

            [class^="section-type4"] ul li a {
                width: 100%;
                display: flex;
                display: -webkit-box;
                display: -webkit-flex;
                flex-wrap: nowrap;
                flex-direction: row-reverse;
                -webkit-flex-direction: row-reverse;
                justify-content: flex-end;
            }

    [class^="section-type4"] li:hover {
        /*box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);*/
    }

    /* 이미지 스타일 */
    [class^="section-type4"] li figure {
        margin-left: 15px;
        width: 100px;
        min-width: 100px;
        height: 75px;
        box-sizing: border-box;
    }

    [class^="section-type4"] li img {
        height: 100%;
        border: 1px solid #cccccc;
        object-fit: cover;
        border-radius: 0;
        box-sizing: border-box;
    }

    /* 텍스트 스타일 */
    [class^="section-type4"] li span {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-box-orient: vertical;
        font-weight: 400;
        height: 75%;
        margin-bottom: 5px;
        overflow: hidden;
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        color: #555;
        overflow: hidden;
    }

    /* 기사 제목과 간격 */
    [class^="section-type4"] li span {
        margin-bottom: 12px;
    }

    /* 카테고리, 바이라인 스타일 */
    [class^="section-type4"] .writername {
        font-size: 14px;
        color: #888;
    }

    [class^="section-type4"] .categoryname {
        font-size: 14px;
        color: #555;
        text-align: right;
    }

    [class^="section-type4"] li div {
        display:none;
    }


/* 박스 템플릿 타입5 (상단 이미지 2단) */
[class^="section-type5"] ul {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2%;
}


    [class^="section-type5"] ul li {
        flex: 1 1 48%; /* 각 li의 너비를 45%로 설정하여 두 개씩 배치 */
        max-width: 48%;
        box-sizing: border-box;
        background-color: #fff;
    }

[class^="section-type5"] li a {
    display: block;
    position: relative;
}

    [class^="section-type5"] li a figure.image-wrapper {
        width: 100%;
        padding-top: 56.25%;
        position: relative;
        overflow: hidden;
    }

[class^="section-type5"] ul li img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[class^="section-type5"] ul li span {
    /*padding-top: 5px;*/
    /*margin: 10px 10px 15px;*/
    margin: 12px 0;
    position: relative;
    display: block;
    font-size: 16px;
    color: #555;
}

[class^="section-type5"] ul li div {
    display: none;
}

/* 하프 */
[class^="section-type"].half {
    width: 100%;
    display: block;
    padding-right: 0; /* 모바일에서는 패딩 제거 */
}

/* 테블릿 이상 */
@media (min-width: 768px) {
    [class^="section-type"].half {
        width: calc(50% - 10px); /* 한 줄에 두 개씩 */
        display: inline-block;
        box-sizing: border-box;
        vertical-align: top;
    }

        /* 연속된 half 중 첫 번째 요소에만 padding-right 적용 */
        [class^="section-type"].half:nth-of-type(odd) {
            padding-right: 20px;
        }

}