@charset "utf-8";

:root {
    --primary: #E5DCD3;
}

.sec_hero .txt_wrap img {max-width:540px}

.sec_03 {background:url('img/sec_03_bg.jpg') no-repeat center/cover;padding:395px 0}

.sec_04 {background:#878787;color:#ffffff}
.sec_04 .title_box .sub {color:#ffffff}
.sec_04 .title_box p,
.sec_06 .title_box p {color:#ffffff;max-width:880px}

.sec_06 {background:#363636;color:#ffffff}
.sec_06 .title_box .sub {color:#ffffff}
.sec_06 .cont {display:flex}
.sec_06 .logo,
.sec_06 .color {display:flex;flex-direction:column}
.sec_06 .logo > div,
.sec_06 .color > div {display:flex;align-items:center;justify-content:center;height:100%}
.sec_06 .logo {width:30%}
.sec_06 .logo img {width:80%;max-width:220px}
.sec_06 .logo .item_01,
.sec_06 .color .item_01 {background:#fff}
.sec_06 .color .item_01 {color:#3D3D3D}
.sec_06 .logo .item_02,
.sec_06 .color .item_02 {background:#878787}
.sec_06 .logo .item_03,
.sec_06 .color .item_03 {background:#363636;color:#D4D4D4}
.sec_06 .img_wrap {width:50%}
.sec_06 .color {flex:1}
.sec_06 .color {font-size:20px;font-weight:600}
.sec_06 .color > div {padding:15px;align-items:flex-end;justify-content:flex-start;}
.sec_07 .banner_img {position:relative}
.sec_07 .banner_img .txt {display:block;width:80%;max-width:544px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}


@media (hover: hover) {}

@media all and (max-width: 1199px) {
    .title_box {margin-bottom:42px}
}

@media all and (max-width: 1023px) {
    .sec_06 .cont {display:block}
    .sec_06 .cont > div {width:100%}
    .sec_06 .logo > div {height:150px}
    .sec_06 .logo img {max-width:154px}
    .sec_06 .color {flex-direction:row;font-size:14px}
    .sec_06 .color > div {width:100%;height:100px;padding:10px}
}

@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;}

    .title_box {margin-bottom:24px}
    .sec_hero .txt_wrap img {max-width:220px}
}