﻿.$safeitemname$ header[role=banner] .titlearea {
    -ms-grid-columns: auto 20px 1fr 20px;
    display: -ms-grid;
}

    .$safeitemname$ header[role=banner] .titlearea .pagetitle {
        width: auto;
    }

    .$safeitemname$ header[role=banner] .titlearea .pagesubtitle {
        -ms-grid-column: 3;
        margin-top: 32px;
    }

.$safeitemname$ section[role=main] {
    /* 필터 및 결과에 대한 행이 포함된 표를 정의합니다. */
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 180px 1fr;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    display: -ms-grid;
}

    .$safeitemname$ section[role=main] .resultsmessage {
        margin-left: 120px;
        margin-right: 120px;
        margin-top: 193px;
    }

    .$safeitemname$ section[role=main] .filterbar {
        -ms-font-feature-settings: "case" 1;
        -ms-grid-row: 1;
        height: auto;
        list-style-type: none;
        margin-left: 60px;
        margin-right: 60px;
        margin-top: 133px;
        max-width: calc(100% - 120px);
        position: relative;
        white-space: nowrap;
        z-index: 1;
    }

        .$safeitemname$ section[role=main] .filterbar li {
            display: inline;
            margin-left: 20px;
            margin-right: 20px;
            margin-top: 5px;
            opacity: 0.6;
        }

            .$safeitemname$ section[role=main] .filterbar li.highlight, .$safeitemname$ section[role=main] .filterbar li:hover {
                opacity: 1.00;
            }

    .$safeitemname$ section[role=main] .resultslist {
        -ms-grid-row: 1;
        -ms-grid-row-span: 2;
        height: 100%;
        position: relative;
        width: 100%;
        z-index: 0;
    }

        .$safeitemname$ section[role=main] .resultslist .win-horizontal.win-viewport .win-surface {
            margin-bottom: 60px;
            margin-left: 90px;
            margin-right: 90px;
            margin-top: 198px;
        }

        .$safeitemname$ section[role=main] .resultslist .win-container {
            margin-bottom: 10px;
            margin-left: 23px;
            margin-right: 23px;
        }

        .$safeitemname$ section[role=main] .resultslist .item {
            /* 아이콘, 간격 및 항목 정보에 대한 열이 포함된 표를 정의합니다. */
            -ms-grid-columns: 40px 10px 1fr;
            -ms-grid-rows: 1fr;
            display: -ms-grid;
            height: 64px;
            padding-left: 7px;
            padding-right: 7px;
            padding-top: 1px;
            width: 280px;
        }

            .$safeitemname$ section[role=main] .resultslist .item .item-image {
                -ms-grid-column: 1;
                -ms-grid-row: 1;
                height: 40px;
                margin-top: 6px;
                width: 40px;
            }

            .$safeitemname$ section[role=main] .resultslist .item .item-content {
                -ms-grid-column: 3;
                -ms-grid-row: 1;
            }

                .$safeitemname$ section[role=main] .resultslist .item .item-content .item-subtitle, .$safeitemname$ section[role=main] .resultslist .item .item-content .item-description {
                    opacity: 0.6;
                }

                /* 선택한 필터 및 쿼리와 일치하는 텍스 모두에 대한 스타일을 정의합니다. */
                .$safeitemname$ section[role=main] .resultslist .item .item-content mark {
                    -ms-high-contrast-adjust: none;
                    background: transparent;
                    color: rgba(90, 183, 227, 1);
                }
