﻿
@media only screen and (max-width:960px) {
    .aboutbanner { 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; }
}



.bigbox { border: solid 1px #000; width: 100%; display: flex; max-width: 1920px; margin: 0px auto; padding-left: 20%; }
    .bigbox > .lb { border: solid 1px #000; min-width: 39%; display: flex; }
        .bigbox > .lb > .lba { flex: 1; }
        .bigbox > .lb > .lbb { width: 240px; }
    .bigbox > .lm { border: solid 1px #000; }




.contentbig > .text { width: 100%; display: flex; margin-top: 2rem; }
    .contentbig > .text > .left { width: 25%; 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: 2rem; padding-left: 1.25rem; }
                .contentbig > .text > .left > ul > li > a { color: #000; font-size: 1.15rem; line-height: 1.5; }
    .contentbig > .text > .right { flex: 1; }
        .contentbig > .text > .right > p.ta { font-size: 1rem; color: #000; line-height: 1.5; }

@media only screen and (max-width:768px) {
    .contentbig > .text > .left > ul > li > a { font-size: 14px; }
    .contentbig > .text > .right > p.ta { font-size: 14px; }
}




.yedyhbox { position: relative; width: 100%; background: #fff; margin-top: 1.15rem; text-align: left; min-height: 190px; display: flex; }
    .yedyhbox > .al { width: 60%; padding: 2rem; }
        .yedyhbox > .al > b { font-size: 1.5rem; font-weight: 400; color: #000; }
        .yedyhbox > .al > p { font-size: 1rem; color: #000; margin-top: 1rem; }
    .yedyhbox > .br { position: relative; }
        .yedyhbox > .br > .brconn { position: absolute; top: 0; left: 0%; height: 100%; background: #fff; z-index: 99; }
            .yedyhbox > .br > .brconn > img { max-width: 480px; width: 100%; }


@media only screen and (max-width:1440px) {
    .yedyhbox > .al { width: 50%; }
}

@media only screen and (max-width:1280px) {
    .yedyhbox > .al { width: 40%; }
}

@media only screen and (max-width:960px) {
    .yedyhbox { flex-wrap: wrap; }
        .yedyhbox > .al { width: 100%; padding: 1rem; }
            .yedyhbox > .al > b { font-size: 1.15rem; }
        .yedyhbox > .br { flex: none; width: 100%; }
            .yedyhbox > .br > .brconn { width: 100%; position: relative; }
                .yedyhbox > .br > .brconn > img { max-width: 100%; }
}

.cpxqmbox { width: 100%; margin-top: 2rem; }
    .cpxqmbox > b { font-weight: 400; color: #000; font-size: 1.5rem; }
    .cpxqmbox > .txt { display: flex; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
        .cpxqmbox > .txt > .img { width: 50%; }
            .cpxqmbox > .txt > .img > img { max-width: 100%; width: 100%; }
        .cpxqmbox > .txt > .wz { flex: 1; padding-left: 5%; }
            .cpxqmbox > .txt > .wz > p { font-size: 1rem; color: #000; }

@media only screen and (max-width:960px) {
    .cpxqmbox > b { font-size: 1.15rem; }
    .cpxqmbox > .txt > .img { width: 100%; }
    .cpxqmbox > .txt > .wz { flex: none; width: 100%; padding-left: 0%; padding-top: 1rem; }
}


.ywfcbox { width: 100%; margin-top: 2rem; background-color: #fff; padding: 2rem; }
    .ywfcbox > b { font-size: 1.5rem; color: #000; font-weight: 400; }
    .ywfcbox > p { font-size: 1rem; color: #000; margin-top: 1rem; }

@media only screen and (max-width:960px) {
    .ywfcbox { padding: 1rem; }
        .ywfcbox > b { font-size: 1.15rem; }
}



.fwcxbox { width: 100%; margin-top: 2rem; }
    .fwcxbox > b { font-weight: 400; color: #000; font-size: 1.5rem; }
    .fwcxbox > p { font-size: 1rem; color: #000; padding-top: 1rem; }

@media only screen and (max-width:960px) {
    .fwcxbox > b { font-size: 1.15rem; }
}


.zzwjbg { background-color: #f5f5f5; width: 100%; padding-top: 2rem; }
.zzwjbig { position: relative; width: 100%; max-width: 1920px; margin: 0px auto; text-align: center; padding: 0% 3%; background-image: url('../images/about/bombg.jpg'); background-position: bottom; background-repeat: no-repeat; }
    .zzwjbig > img { max-width: 100%; }
    .zzwjbig > .text { position: absolute; top: 0px; left: 0px; right: 0px; }

.textbox { display: flex; max-width: var(--maxwidth); width: 100%; padding-top: 150px; padding-left: 15px; padding-right: 15px; margin: 0px auto; }
    .textbox > .ll { width: 50%; text-align: right; padding-right: 8rem; }
        .textbox > .ll > div { display: inline-block; text-align: left; }
            .textbox > .ll > div > a { display: block; color: #FFE9CD; margin-bottom: 2rem; font-size: 1.15rem; }
    .textbox > .rr { width: 50%; text-align: right; padding-right: 1rem; }
        .textbox > .rr > p { text-align: right; color: #38322B; font-size: 1.15rem; }


@media only screen and (max-width:1366px) {
    .textbox > .ll { padding-right: 6rem; }
}

@media only screen and (max-width:1280px) {
    .textbox > .ll { padding-right: 5rem; }
}

@media only screen and (max-width:1024px) {
    .textbox { padding-top: 100px; }
        .textbox > .ll { padding-right: 4rem; }
            .textbox > .ll > div > a { margin-bottom: 1rem; font-size: 1rem; }
        .textbox > .rr > p { font-size: 1rem; }
}

@media only screen and (max-width:768px) {
    .textbox { padding-top: 60px; }
        .textbox > .ll { padding-right: 1rem; }
}
