@media only screen and (max-width:960px) {
    .probanner { padding-top: 60px; }
}

.contentbg { background-color: #f5f5f5; width: 100%; }
.contentbig { width: 100%; max-width: var(--maxwidth); padding: 2rem 15px; margin: 0px auto; }
.route { width: 100%; }
    .route > a { font-size: 14px; color: #999; }
    .route > b { font-size: 1.5rem; display: block; color: #000; font-weight: 400; }

@media only screen and (max-width:960px) {
    .route > b { font-size: 1.25rem; }
}

@media only screen and (max-width:960px) {
    .route > a { font-size: 12px; }
    .route > b { font-size: 14px; }
}



.contentbig > .text { width: 100%; display: flex; margin-top: 2rem; margin-bottom: 4rem; }
    .contentbig > .text > .left { width: 22%; border-left: solid 1px #BABABA; position: relative; }
        .contentbig > .text > .left::after { content: ""; position: absolute; top: 0px; left: -5px; width: 10px; height: 10px; background-color: #ccc; }
        .contentbig > .text > .left > ul { width: 100%; padding-top: 1rem; }
            .contentbig > .text > .left > ul > li { width: 100%; text-align: left; margin-bottom: 1.5rem; padding-left: 1.25rem; }
                .contentbig > .text > .left > ul > li > a { color: #000; font-size: 1.15rem; line-height: 1.5; display: flex; width: 100%; align-items: center; }
                    .contentbig > .text > .left > ul > li > a > span { display: block; }
                        .contentbig > .text > .left > ul > li > a > span.ica { width: 16px; margin-right: 8px; }
                            .contentbig > .text > .left > ul > li > a > span.ica > img { max-width: 100%; width: 100% }
                        .contentbig > .text > .left > ul > li > a > span.name { flex: 1; }
                        .contentbig > .text > .left > ul > li > a > span.ic1 { width: 15px; }


                .contentbig > .text > .left > ul > li > ul { width: 100%; padding-left: 24px; margin-top: 10px; }
                    .contentbig > .text > .left > ul > li > ul > li { width: 100%; }
                        .contentbig > .text > .left > ul > li > ul > li > a { color: #BABABA; font-size: 14px; }


    .contentbig > .text > .right { flex: 1; margin-left: 3%; }

@media only screen and (max-width:768px) {
    .contentbig > .text > .left > ul > li > a { font-size: 14px; }
}


.searchbox { width: 100%; }
    .searchbox > b { font-size: 1.15rem; color: #000; font-weight: 400; }
    .searchbox > .search { margin-top: 10px; background-color: #fff; max-width: 222px; width: 100%; border: solid 1px #DBDBDB; display: flex; align-items: center; }
        .searchbox > .search > .input { flex: 1; }
        .searchbox > .search input { color: #000; height: 28px; padding-left: 5px; font-size: 1rem; width: 100%; border-style: none }
        .searchbox > .search > .submit { width: 24px; cursor: pointer; padding: 2px 2px; }


p.cname { margin-top: 1rem; margin-bottom: 1rem; font-size: 1rem; color: #000; }

.listbox { width: 100%;  }
    .listbox > ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; justify-content: space-between; }
        .listbox > ul > li { background-color: #fff; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
            .listbox > ul > li:hover { transform: translateY(-5px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }


            .listbox > ul > li > a { display: flex; width: 100%; position: relative; }
                .listbox > ul > li > a > div.img { width: 92px; }
                    .listbox > ul > li > a > div.img > img { width: 100%; max-width: 100%; object-fit: cover; }

                .listbox > ul > li > a > div.txt { flex: 1; margin-left: 10px; }
                    .listbox > ul > li > a > div.txt > b { font-size: 14px; color: #000; font-weight: 400; }
                .listbox > ul > li > a > img.rjt { position: absolute; right: 0px; bottom: 0px; }

@media only screen and (max-width:960px) {
    .contentbig > .text > .left > ul > li > a { font-size: 1rem; }
    .searchbox > b { font-size: 1rem; }
    .listbox > ul { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (max-width:640px) {
    .contentbig > .text > .left { width: 35% }
    .listbox > ul { grid-template-columns: repeat(1, 1fr); }
}