@charset "utf-8";

:root {
    --primary: #0C34B1;
}

.gra_01 {background:linear-gradient(to right, #00BAFF, #005AFB);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sec_hero .txt_wrap .logo {max-width:408px}
.bx_pf .sec_info {background:var(--primary);color:#ffffff}
.bx_pf .sec_info .cont {color:#ffffff}

.identity_box {display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows: repeat(2, 1fr);height:1200px}
.identity_box > div {height:auto}
.identity_box > div img {max-width:314px}
.identity_box .item_01 {background:#F5F5F5;grid-column: 1;grid-row: 1;border-top:solid 1px #DDDDDD;}
.identity_box .item_02 {background:#000000;grid-column: 1;grid-row: 2;}
.identity_box .item_02 .txt {color:#ffffff;}
.identity_box .item_03 {border-top:solid 1px #DDDDDD;border-bottom:solid 1px #DDDDDD;grid-column: 2;grid-row: 1 / span 2}
.identity_box .item_03 img {max-width:256px}

.sec_05 {background:#FAFAFA}
.sec_05 .item_01 {background:#0055F7;height:25%}
.sec_05 .item_02 {background:linear-gradient(130deg, #2EE6FF, #005AFB)}
.sec_05 .item_03 {background:#0E9BFA}
.sec_05 .item_04 {background:#54DFFF}
.sec_05 .item_05 {background:#000000}
.sec_05 .cont {display:flex}
.sec_05 .cont > div {width:100%}
.sec_system .color {display:flex;flex-direction:column;}
.sec_system .color .inner {display:flex;flex:1;width:100%;margin:0;padding:0}
.sec_system .color .inner > div {width:100%;height:100%}
.sec_system .color .inner2 {display:flex;flex-direction:column;}
.sec_system .color .inner2 > div {flex:1}
.sec_system .color .item {text-align:left;font-weight:normal;justify-content:flex-start;}

@media (hover: hover) {}

@media all and (max-width: 1199px) {
    .title_box {margin-bottom:42px}
    .identity_box {height:700px}
    .identity_box > div img {width:240px}
    .identity_box .item_03 img {width:160px}
}

@media all and (max-width: 1023px) {
    .sec_05 .cont {display:block}
    .sec_system .color .inner,
    .sec_system .color .inner2 {display:block}
    .sec_system .color .item {height:150px !important}
}

@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 {height:auto;display:flex;flex-direction:row;flex-wrap:wrap}
    .identity_box > div {width:50%;height:200px}
    .identity_box > div img {width:120px}
    .identity_box .item_03 {width:100%;height:250px}
    .identity_box .item_03 img {width:100px}
}