@charset "utf-8";

:root {
    --primary: #E5DCD3;
}

.sec_hero .txt_wrap img {max-width:590px}
.bx_pf .sec_info {background:#E5DCD3}
.sec_03 {background:url('img/sec_03_bg.jpg') no-repeat center/cover;padding:395px 0}
.sec_04 {background:#231F1F;color:#ffffff}
.sec_04 .title_box .sub {color:#BEA679}
.sec_04 .title_box p {color:#ffffff}

.sec_06 .title_box .sub {color:#22272D}
.sec_08 .color {display:grid;grid-template-columns:repeat(4, 1fr);}
.sec_08 .color > div {display:flex;align-items:center;justify-content:center;text-align:center;font-size:24px;height:250px}
.sec_08 .color .item_01 {background:#E5DCD3}
.sec_08 .color .item_02 {background:#231F1F;color:#ffffff}
.sec_08 .color .item_03 {background:#FFFFFF}
.sec_08 .color .item_04 {background:#A59B92;color:#ffffff}
.sec_08 .apps {background:#F5F5F5;padding:150px 20px}
.sec_08 .apps > .tit {display:block;font-size:20px;font-weight:700;color:#121212;text-align:center;margin-bottom:30px}
.sec_08 .apps .list {display:flex;align-items:center;justify-content:center;gap:36px;}

.identity_box > div img {max-width:216px}
.identity_box .item_01 {background:#EDE8E2;}
.identity_box .item_02 {background:#231F1F;}


@media (hover: hover) {}

@media all and (max-width: 1199px) {
    .title_box {margin-bottom:42px}
    .sec_08 .apps {padding:100px 20px}
}

@media all and (max-width: 1023px) {
    .sec_08 .color {grid-template-columns:repeat(2, 1fr);}
    .sec_08 .color > div {height:150px;font-size:16px}
    .identity_box > div img {max-width:150px}

    .sec_08 .apps .list {gap:20px;flex-wrap:wrap;max-width:400px;margin:0 auto}
    .sec_08 .apps .list > div {width:calc((100% - 40px)/3)}
    .sec_08 .apps .list > div img {width:100%}
}

@media all and (max-width: 767px) {
    .bx_pf .sec_info .title_box,
    .txt_info .title_box.side {text-align:left;align-items:flex-start;}
    .bx_pf .sec_info .info {align-items:flex-start;}
    .identity_box > div img {max-width:100px}

    .title_box {margin-bottom:24px}

    .sec_08 .apps {padding:80px 20px}
}