﻿@media only screen and (max-width:960px) {
    .contactbanner { 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; }
    .route > p { font-size: 1rem; color: rgba(0,0,0,0.33); font-weight: 400; margin-top: 10px; }

@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; }
}


.contenttext { width: 100%;   margin: 0px auto; display: flex; flex-wrap: wrap; }
    .contenttext > .left { background-color: #fff; width: 50%; }
        .contenttext > .left > .box { min-width: 470px; float: right; padding: 2rem 0px; }
            .contenttext > .left > .box > b { font-size: 1.15rem; color: #000; font-weight: 400; }

            .contenttext > .left > .box > .llbox { min-height: 200px; width: 100%; border-left: solid 1px #BABABA; position: relative; margin-top: 1rem; padding-top: 2rem; }
                .contenttext > .left > .box > .llbox::after { content: ""; position: absolute; top: 0px; left: -5px; width: 10px; height: 10px; background-color: #ccc; }

                .contenttext > .left > .box > .llbox > .item { display: flex; align-items: center; margin-bottom: 1rem; margin-left: 2rem; padding-right: 1rem }
                    .contenttext > .left > .box > .llbox > .item > span { font-size: 14px; color: #000; }
                        .contenttext > .left > .box > .llbox > .item > span:first-child { width: 36px; }
                        .contenttext > .left > .box > .llbox > .item > span:nth-child(2) { width: 20%; }
                        .contenttext > .left > .box > .llbox > .item > span:nth-child(3) { flex: 1; }


    .contenttext > .right { flex: 1; margin-left: 2%; padding: 2rem 10px; text-align: left; }
        .contenttext > .right > img { max-width: 100%; }

@media only screen and (max-width:1280px) {
    .contenttext > .left { width: 65% }
}


@media only screen and (max-width:768px) {
    .contenttext > .left { width: 100%; }
        .contenttext > .left > .box { float: none; margin: 0px auto; padding: 2rem 3%; }
    .contenttext > .right { margin-left: 0%; flex: none; width: 100%; text-align: center; }
}


p.bezi { font-size: 2.5rem; color: #164194 }

@media only screen and (max-width:1024px) {
    p.bezi { font-size: 2rem; }
}

@media only screen and (max-width:768px) {
    p.bezi { font-size: 1.5rem; }
}
