@media only screen and (max-width:960px) {
    .indHeader .logos img { display: none; }
}


.homebanner { width: 100%; margin: 0px auto; text-align: center; }
    .homebanner > picture { width: 100%; object-fit: cover; margin: 0px auto; text-align: center; }
        .homebanner > picture > img { width: 100%; object-fit: cover; margin: 0px auto; }



.contentbg { background-color: #fff; width: 100%; }
.contentbig { width: 100%; max-width: var(--maxwidth); padding: 0px 15px; margin: 0px auto; }

.swiper { width: 100%; height: 170px; }
.swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; }
    .swiper-slide .pics { display: flex; width: 100%; align-items: center; }
        .swiper-slide .pics > .img { width: 50%; }
            .swiper-slide .pics > .img > img { max-width: 100%; }
        .swiper-slide .pics > .txt { flex: 1; color: #000; font-size: 1rem; text-align: left; }
:root { --swiper-navigation-size: 20px; }

.procontentbg { background-color: #F7F9FC; width: 100%; }
.procontentbig { width: 100%; max-width: var(--maxwidth); padding: 2rem 15px; margin: 0px auto; }
    .procontentbig > b { font-size: 1.15rem; color: #000; font-weight: 400; }
    .procontentbig > ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; justify-content: space-between; margin: 2rem 0px; }
        .procontentbig > ul > li { position: relative; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
            .procontentbig > ul > li:hover { transform: translateY(-5px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
            .procontentbig > ul > li > .img { padding: 1rem; width: 100%; text-align: center; border-bottom: solid 1px #E3E3E3; }
                .procontentbig > ul > li > .img > a > img { max-width: 100%; }
            .procontentbig > ul > li > i { position: absolute; left: 0px; top: 0px; }
            .procontentbig > ul > li > p { padding: 1rem; color: #000; font-size: 14px; }

@media only screen and (max-width:640px) {
    .procontentbig > ul { grid-template-columns: repeat(2, 1fr); }
}


.aboutbg { width: 100%; max-width: 1920px; padding: 2rem 3%; margin: 0px auto; }
    .aboutbg > .box { width: 100%; display: flex; flex-wrap: wrap; }
        .aboutbg > .box > .all { width: 50%; }
            .aboutbg > .box > .all > b { font-size: 1.15rem; color: #000; font-weight: 400; display: block; margin-bottom: 2rem; }
            .aboutbg > .box > .all > p { margin-bottom: 2rem; color: #000; font-size: 1rem; }
                .aboutbg > .box > .all > p.p1 { color: #1A4496 }
            .aboutbg > .box > .all > i { display: block; color: #164194; font-style: normal; font-size: 2rem; }
        .aboutbg > .box > .arr { flex: 1; margin-left: 2%; }
            .aboutbg > .box > .arr > img { max-width: 100%; }

@media only screen and (max-width:960px) {
    .aboutbg > .box > .all { width: 100%; margin-bottom: 2rem; }
        .aboutbg > .box > .all > i { font-size: 1.5rem; }
    .aboutbg > .box > .arr { width: 100%; margin-left: 0%; flex: none; }
}


.newscontentbig { background-color: #F7F9FC; width: 100%; }
.newsbg { width: 100%; max-width: var(--maxwidth); padding: 2rem 15px 2rem 15px; margin: 0px auto; }
    .newsbg > b { font-size: 1rem; color: #000; font-weight: 400; }
        .newsbg > b > a { color: #538AB8; font-size: 1rem; }

    .newsbg > ul { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; justify-content: space-between; }
        .newsbg > ul > li { background-color: #fff; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
            .newsbg > ul > li:hover { transform: translateY(-5px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
            .newsbg > ul > li > a { display: flex; width: 100%; position: relative; }
                .newsbg > ul > li > a > div.txt { flex: 1; min-height: 168px; }
                    .newsbg > ul > li > a > div.txt > b { font-size: 14px; color: #000; font-weight: 400; }
                    .newsbg > ul > li > a > div.txt > p { font-size: 12px; color: #000; }
                .newsbg > ul > li > a > div.date { position: absolute; left: 0px; bottom: 0px; border-top: solid 1px #000; color: #000; font-size: 12px; }
                .newsbg > ul > li > a > div.rjt { background-color: #e6ebf5; position: absolute; right: 0px; bottom: 0px; width: 2rem; height: 2rem; text-align: center; display: flex; align-items: center; }
            .newsbg > ul > li:hover > a > div.rjt { background-color: #164194 }
                .newsbg > ul > li:hover > a > div.rjt .svg-fill { fill: #fff; }




@media only screen and (max-width:768px) {
    .newsbg > ul { grid-template-columns: repeat(1, 1fr); }
}



.eventcontentbig { background-color: #fff; width: 100%; border-bottom: solid 1px #E7ECF5; }
.eventbg { width: 100%; max-width: var(--maxwidth); padding: 2rem 15px 2rem 15px; margin: 0px auto; }
    .eventbg > b { font-size: 1rem; color: #000; font-weight: 400; }
        .eventbg > b > a { color: #538AB8; font-size: 1rem; }

    .eventbg > ul { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; justify-content: space-between; }
        .eventbg > ul > li { background-color: #fff; padding: 0px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
            .eventbg > ul > li:hover { transform: translateY(-5px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
            .eventbg > ul > li > a { display: flex; width: 100%; position: relative; flex-wrap: wrap; }
                .eventbg > ul > li > a > div.img { width: 100%; overflow: hidden; align-items: center; }
                    .eventbg > ul > li > a > div.img > img { max-height: 90px; max-width: 100%; width: 100%; object-fit:contain; object-position: center; }
                .eventbg > ul > li > a > div.txt { width: 100%;  min-height: 168px; padding: 1rem; }
                    .eventbg > ul > li > a > div.txt > div.begin { font-size: 12px; color: #666; }
                    .eventbg > ul > li > a > div.txt > div.addr { font-size: 12px; color: #666; }
                    .eventbg > ul > li > a > div.txt > b { display: block; font-size: 14px; color: #000; font-weight: 400; padding: 10px 0px; }
                    .eventbg > ul > li > a > div.txt > p { font-size: 12px; color: #000; }
                .eventbg > ul > li > a > div.date { position: absolute; left: 15px; bottom: 15px; color: #000; font-size: 14px; color: #666; }
                .eventbg > ul > li > a > div.rjt { background-color: #e6ebf5; position: absolute; right: 10px; bottom: 10px; width: 2rem; height: 2rem; text-align: center; display: flex; align-items: center; }
            .eventbg > ul > li:hover > a > div.rjt { background-color: #164194 }
                .eventbg > ul > li:hover > a > div.rjt .svg-fill { fill: #fff; }




@media only screen and (max-width:768px) {
    .eventbg > ul { grid-template-columns: repeat(1, 1fr); }
}