@charset "utf-8";

:root {
    --primary: #5D4730;
}

.sec_hero .txt_wrap .logo {max-width:446px}
.bx_pf .sec_info {background:linear-gradient(to right, #00A1FF, #002BFF);color:#ffffff}
.bx_pf .sec_info .cont {color:#ffffff}

.txt_info .title_box p {margin:0}

.sec_04 {background:linear-gradient(104deg, #09090B -2.86%, #080B12 1.26%, #071128 7.42%, #061B4B 14.62%, #042A7C 23.87%, #013CBA 33.13%, #0048E3 38.27%, #0262E8 50.61%, #089DF4 74.25%, #1AA8F4 78.36%, #5BD1F4 92.76%, #75E2F5 99.96%);color:#ffffff}
.sec_04 .title_box p {max-width:730px;color:#ffffff}
.sec_04 .identity_box {background:#ffffff}
.sec_04 .identity_box .item_02 {background:#000000}
.sec_04 .color {display:flex}
.sec_04 .color > div {width:100%;height:320px;background:#000000}
.sec_04 .color .item_02 {background:#0048E3}
.sec_04 .color .item_03 {background:#089DF4}
.sec_04 .color .item_04 {background:#75E2F5}

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

@media all and (max-width: 1023px) {
    .sec_05 .cont {display:block}
}

@media all and (max-width: 767px) {
    .title_box {margin-bottom:24px}
    .bx_pf .sec_info .title_box,
    .txt_info .title_box.side {text-align:left}
    .bx_pf .sec_info .info,
    .txt_info .title_box.side {align-items:flex-start}
    .sec_hero .txt_wrap .logo {max-width:198px}

    .identity_box {flex-direction:column-reverse;}
    .identity_box > div img {max-width:175px}
    .sec_04 .color {display:grid;grid-template-columns:repeat(2, 1fr);}
}