﻿

.probannerbig { width: 100%; transition: all ease-in-out .3s; }
    .probannerbig > .ban { background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; }
        .probannerbig > .ban > .conn { position: relative; z-index: 2; width: 100%; padding: 360px 4% 30px 4%; margin: 0px auto; max-width: 1920px; }
            .probannerbig > .ban > .conn > b { font-weight: 400; font-size: 1rem; color: #fff; line-height: 1; }
                .probannerbig > .ban > .conn > b a { font-weight: 400; font-size: 1rem; color: #fff; line-height: 1; }


@media only screen and (max-width:1280px) {
    .probannerbig > .ban > .conn { padding: 300px 4% 30px 4%; }
}

@media only screen and (max-width:960px) {
    .probannerbig > .ban > .conn { padding: 240px 4% 30px 4%; }
}

@media only screen and (max-width:768px) {
    .probannerbig > .ban > .conn { padding: 200px 4% 30px 4%; }
}



.contentbig { width: 100%; padding: 0px 4% 0px 4%; margin: 80px auto 40px auto; max-width: 1920px; }
    .contentbig > .conn { display: flex; }
        .contentbig > .conn > .left { width: 300px; }
        .contentbig > .conn > .right { flex: 1; margin-left: 5%; background-color: #f5f5f5; padding-bottom: 40px; }



.pagemenu { background-color: #f5f5f5; padding-bottom: 40px; }
    .pagemenu > li { width: 100%; padding: 0px 20% 0px 20%; }
        .pagemenu > li.action { width: 100%; background-color: #0071ce; color: #fff; padding: 20px 20px 20px 60px; line-height: 1; font-size: 1.25rem; margin-bottom: 20px; }
            .pagemenu > li.action a { color: #fff; font-size: 1.25rem; }
        .pagemenu > li.citem { width: 100%; background-color: #8c9398; color: #fff; padding: 20px 20px 20px 60px; line-height: 1; font-size: 1.25rem; }
            .pagemenu > li.citem a { color: #fff; font-size: 1.25rem; }


        .pagemenu > li.chliditem > div { padding: 20px 0px; display: flex; align-items: center; justify-content: flex-start; border-bottom: solid 1px #eaeaea }
            .pagemenu > li.chliditem > div > a { flex: 1; font-size: 1rem; color: #333; margin-left: 10px; }
            .pagemenu > li.chliditem > div > i { display: inline-block; color: #333; font-style: normal; font-size: 0.625rem; }

            .pagemenu > li.chliditem > div.active { color: #0071ce }
                .pagemenu > li.chliditem > div.active > a { color: #0071ce }
                .pagemenu > li.chliditem > div.active > i { color: #0071ce; font-style: normal; }

            .pagemenu > li.chliditem > div:hover { color: #0071ce }
                .pagemenu > li.chliditem > div:hover > a { color: #0071ce }
                .pagemenu > li.chliditem > div:hover > i { color: #0071ce; font-style: normal; }

.pagemenufixed { position: fixed; top: 100px; width: 300px; }


.pagetext { padding: 25px 4% 0px 4%; }
    .pagetext b.big { border-bottom: solid 1px #d4d4d4; display: block; font-size: 1.375rem; color: #161616; line-height: 1; padding: 20px 0px 19px 0px; }

ul.list { display: block; padding: 10px 4% 0px 4%; }
    ul.list > li { width: 100%; display: block; border-bottom: solid 1px #d4d4d4; padding: 25px 0px; display: flex; align-items: center; justify-content: flex-start; }
        ul.list > li > .date { background-color: #8c9398; padding: 10px; color: #fff; min-width: 88px; }
            ul.list > li > .date > b { font-size: 1.25rem; display: block; margin-bottom: 5px; }
            ul.list > li > .date > p { font-size: 0.875rem; }

        ul.list > li > .title { flex: 1; color: #444444; font-size: 1rem; margin-left: 20px; }
            ul.list > li > .title > a { color: #444444; font-size: 1rem; }
        ul.list > li > .more { color: #666666 }
            ul.list > li > .more > a { color: #666666; font-size: 1rem; }

        ul.list > li:hover a { text-decoration: underline; }





@media only screen and (max-width:1280px) {
    .contentbig { margin: 60px auto 30px auto; }
}

@media only screen and (max-width:960px) {
    .contentbig { margin: 40px auto 20px auto; }
        .contentbig > .conn > .left { width: 220px; }
    .pagemenufixed { width: 220px; }
    .pagemenu > li { padding: 0px 20px 0px 20px; }
        .pagemenu > li.action { padding: 20px 20px 20px 20px; }
        .pagemenu > li.citem { padding: 20px 20px 20px 20px; }
}

@media only screen and (max-width:768px) {
    .contentbig { margin: 20px auto 20px auto; }
        .contentbig > .conn { flex-wrap: wrap; flex-direction: column; }
            .contentbig > .conn > .left { width: 100%; margin-bottom: 20px; }
            .contentbig > .conn > .right { flex: none; width: 100%; margin-left: 0px; }
    .pagetext { padding: 20px 4% 0px 4%; }
}




.pages { width: 100%; text-align: center; padding: 25px 4% 0px 4%; }
    .pages .nodate { padding: 6px 5px 5px 5px; margin-bottom: 15px; text-align: center; clear: both; font-size: 1.25rem; }
    .pages a.PageLink { font-size: 1rem; display: inline-block; height: 28px; line-height: 28px; margin-left: 5px; padding: 0px 9px; color: #333; overflow: hidden; text-decoration: none; }
        .pages a.PageLink:hover { background-color: #8c9398; color: #fff; }
    .pages .PageSel { font-size: 1rem; display: inline-block; height: 28px; line-height: 28px; margin-left: 5px; padding: 0px 9px; color: #0071ce; overflow: hidden; text-decoration: none; }
        .pages .PageSel:hover { background-color: #8c9398; color: #fff; }
