﻿
@media only screen and (max-width:960px) {
    .content_wrapper { padding-top: 60px; }
}

img { max-width: 100%; }
.banner { text-align: center; border-style: none; position: relative; width: 100%; background-color: #fff; margin: 0px auto; background-size: cover; }
    .banner > img { max-width: 1920px; width: 100%; margin: 0px auto; }


.rountmenu { margin: 0px auto; width: 100%; max-width: 1920px; padding: 2rem 4%; color: #161616; font-size: 1rem; }
    .rountmenu > a { color: #161616; font-size: 1rem; padding: 0px 5px; }

@media only screen and (max-width:960px) {
    .rountmenu { font-size: 14px; }
        .rountmenu > a { font-size: 14px; }
}


.infobg { width: 100%; }
.infobig { width: 100%; max-width: 1920px; padding: 2rem 4% 5rem 4%; margin: 0px auto; text-align: center; }
    .infobig > .title { text-transform: uppercase; font-size: 2.25rem; color: #000; text-align: center; line-height: 1.5; }
    .infobig > .subtitle { font-size: 1rem; color: #666666 }
    .infobig > .content { width: 100%; max-width: 1400px; margin: 2rem auto; }
        .infobig > .content > ul { display: flex; width: 100%; flex-wrap: wrap; align-items: center; justify-content: center; }
            .infobig > .content > ul > li { width: 28%; text-align: center; padding: 1rem 1rem; }
                .infobig > .content > ul > li.sps { width: 6%; padding: 0px; }
        .infobig > .content div.item { width: 220px; height: 220px; text-align: center; border-radius: 100%; background-color: #f2f2f2; display: flex; justify-content: center; align-items: center; margin: 0px auto; }
            .infobig > .content div.item b { font-size: 1.6rem; color: #0064b6; display: block; text-transform: capitalize; }
            .infobig > .content div.item i { font-size: 1rem; color: #333; font-style: normal; }
        .infobig > .content div.sps { color: #000; width: 100%; font-size: 3.75rem; display: flex; justify-content: center; align-items: center; }
        .infobig > .content > p { width: 100%; text-align: center; font-size: 1.85rem; color: #000; margin-top: 4rem; }



@media only screen and (max-width:1600px) {
    .infobig > .content div.item { width: 220px; }
}

@media only screen and (max-width:1366px) {
    .infobig > .content div.item { width: 180px; height: 180px; }
    .infobig > .content div.sps { font-size: 2.75rem; }
}

@media only screen and (max-width:1280px) {
    .infobig > .title { font-size: 2rem; }
    .infobig > .subtitle { font-size: 14px; }
    .infobig > .content div.item b { font-size: 1.5rem; }
    .infobig > .content > p { font-size: 1.5rem; }
}

@media only screen and (max-width:1024px) {
    .infobig > .title { font-size: 1.5rem; }
    .infobig > .content div.item { width: 180px; height: 180px; }
    .infobig > .content div.sps { font-size: 2rem; }
    .infobig > .content div.item b { font-size: 1.25rem; }
    .infobig > .content > p { font-size: 1.25rem; }
}

@media only screen and (max-width:768px) {
    .infobig > .content > ul > li { width: 33%; }
    .infobig > .content li.sps { display: none; }
}

@media only screen and (max-width:640px) {
    .infobig > .content > ul > li { width: 50%; }
    .infobig > .content li.sps { display: none; }
}





.gsjjbg { width: 100%; background-color: #f5f5f5 }
.gsjjbig { width: 100%; max-width: 1920px; padding: 2rem 4% 2rem 4%; margin: 0px auto; text-align: center; }
    .gsjjbig > .title { text-transform: uppercase; font-size: 2.25rem; color: #000; text-align: center; line-height: 1.5; }
    .gsjjbig > .subtitle { font-size: 1rem; color: #666666 }
    .gsjjbig > .content { width: 100%; margin: 2rem auto; }
        .gsjjbig > .content > ul { width: 100%; }
            .gsjjbig > .content > ul > li { width: 100%; display: flex; text-align: left; font-size: 1rem; margin: 0.8rem 0px; }
                .gsjjbig > .content > ul > li > .ll { width: 220px; background-color: #0064b6; color: #fff; padding: 0.5rem 1rem; }
                .gsjjbig > .content > ul > li > .rr { flex: 1; background-color: #fff; color: #000; margin-left: 1rem; padding: 0.5rem 1rem; }



@media only screen and (max-width:1280px) {
    .gsjjbig > .title { font-size: 2rem; }
    .gsjjbig > .subtitle { font-size: 14px; }
}

@media only screen and (max-width:1024px) {
    .gsjjbig > .title { font-size: 1.5rem; }
}

@media only screen and (max-width:960px) {
    .gsjjbig > .content > ul > li > .ll { width: 160px; }
}

@media only screen and (max-width:640px) {
    .gsjjbig > .content > ul > li > .ll { width: 120px; }
}

@media only screen and (max-width:480px) {
    .gsjjbig > .content > ul > li > .ll { width: 80px; }
}




.gsygbg { width: 100%; background-color: #fff }
.gsygbig { width: 100%; max-width: 1920px; padding: 2rem 4% 2rem 4%; margin: 0px auto; text-align: center; }
    .gsygbig > .title { text-transform: uppercase; font-size: 2.25rem; color: #000; text-align: center; line-height: 1.5; }
    .gsygbig > .subtitle { font-size: 1rem; color: #666666 }
    .gsygbig > .content { width: 100%; margin: 2rem auto; }
        .gsygbig > .content > ul { width: 100%; }
            .gsygbig > .content > ul > li { width: 100%; display: flex; text-align: left; font-size: 1rem; margin: 0.8rem 0px; }
                .gsygbig > .content > ul > li > .ll { width: 160px; color: #000; padding: 0.5rem 1rem; }
                    .gsygbig > .content > ul > li > .ll > span { display: inline-block; position: relative; padding-left: 10px; }
                        .gsygbig > .content > ul > li > .ll > span::before { display: block; position: absolute; width: 8px; height: 8px; top: 10px; left: 0px; border-radius: 4px; content: ""; background-color: #0064b6; }
                .gsygbig > .content > ul > li > .cc { width: 100px; color: #000; padding: 0.5rem 1rem; }
                    .gsygbig > .content > ul > li > .cc > hr { margin-top: 0.8rem; height: 1px; background-color: #bbb; }

                .gsygbig > .content > ul > li > .rr { flex: 1; color: #161616; margin-left: 1rem; padding: 0.5rem 1rem; }



@media only screen and (max-width:1280px) {
    .gsygbig > .title { font-size: 2rem; }
    .gsygbig > .subtitle { font-size: 14px; }
}

@media only screen and (max-width:1024px) {
    .gsygbig > .title { font-size: 1.5rem; }
}

@media only screen and (max-width:960px) {
    .gsygbig > .content > ul > li > .ll { width: 130px; }
    .gsygbig > .content > ul > li > .cc { width: 40px; padding: 0.5rem 0rem; }
    .gsygbig > .content > ul > li > .ll > span::before { top: 7px; }
}

@media only screen and (max-width:640px) {
    .gsygbig > .content > ul > li > .ll { width: 120px; }
    .gsygbig > .content > ul > li > .cc { display: none; }
}

@media only screen and (max-width:480px) {
    .gsygbig > .content > ul > li > .ll { width: 100px; }
}
