@charset "utf-8";

:root {
    --primary: #1E54A6;
}

.title_box p {color:#565656}

.sec_hero .txt_wrap .logo {max-width:300px}
.sec_hero .txt_wrap .tit .color {color:#B4D9FF}
.sec_hero .view_more .round {background:#0350B5}

.sec_info {background:var(--primary)}
.sec_info .cont {color:#F3F3F3}

.desktop_view_open {background:url('img/desktop_view_bg.svg') no-repeat center bottom 5%/100%;padding:150px 0 100px}
.over_view {background:linear-gradient(#ffffff, #E2F3FF);padding:50px 0 var(--sec-padding)}

.sec_05 {background:url('img/sec_05_bg.png') no-repeat center/cover;padding:var(--sec-padding) 0}
.sec_05 .list {display:flex;align-items:center;justify-content:center;width:fit-content;position:relative;margin:100px auto 0}
.sec_05 .list .item {display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px 0;text-align:center;width:420px;height:420px;background:#0350B5;border-radius:400px;padding:30px;color:#ffffff;position:relative;z-index:3}
.sec_05 .list .item_02 {background:#91B5F0;margin:0 -40px;z-index:2}
.sec_05 .list .item_03 {background:#01A6DB;z-index:1}
.sec_05 .list .item span {font-size:20px;font-weight:500}
.sec_05 .list .item .tit {display:block;font-size:34px;font-weight:700;line-height:1.4}

.sec_08 {padding:var(--sec-padding) 0}
.sec_08 .list {display:flex;align-items:flex-start;justify-content:center;gap:135px;margin-top:60px}
.sec_08 .list .item {max-width:376px;border-radius:20px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.15)}

/* 디자인시스템 */
.sec_system {background:linear-gradient(#E2F3FF, #ffffff);padding-top:var(--sec-padding)}
.sec_system .cont {margin-top:60px}
.sec_system .font {grid-column:span 2;display:flex;align-items:center;justify-content:center;gap:10px 40px;background:#ffffff;padding:40px}
.sec_system .font .left {font-size:120px}
.sec_system .font .right {font-size:27px}
.sec_system .font .right .name {display:block;font-size:1.02em;font-weight:500;margin-bottom:5px}
.sec_system .color {display:grid;grid-template-columns:repeat(4, 1fr);grid-template-rows:350px 350px;}
.sec_system .color .item_01 {background:#B7DEFF}
.sec_system .color .item_02 {background:linear-gradient(#01A6DB, #0350B5)}
.sec_system .color .item_03 {background:#0350B5;grid-column:span 2;grid-row:span 2;}


@media (hover: hover) {}

@media all and (max-width: 1529px) {
    .sec_system .font{gap:10px 30px}
    .sec_system .font .left {font-size:90px}
    .sec_system .font .right {font-size:20px}
}

@media all and (max-width: 1199px) {
    .sec_hero .txt_wrap .logo {max-width:320px}

    .desktop_view_open {padding:110px 0 60px}

    .sec_05 .list {margin-top:60px}
    .sec_05 .list .item {width:320px;height:320px}
    .sec_05 .list .item span {font-size:17px}
    .sec_05 .list .item .tit {font-size:26px}

    .sec_08 .list {gap:0 40px;margin-top:40px}

    .sec_system .color {grid-template-rows:250px 250px;}
    .sec_system .color .item {height:auto}
    .sec_system .font {padding:20px}
    .sec_system .font .left {font-size:60px}
    .sec_system .font .right {font-size:16px}
}

@media all and (max-width: 1023px) {
    .sec_05 .list .item {width:250px;height:250px;gap:14px 0}
    .sec_05 .list .item_02 {margin:0 -20px}

    .sec_system .color {grid-template-columns:repeat(2, 1fr);grid-template-rows:auto}
    .sec_system .font {height:150px}
    .sec_system .color .item {height:150px}
    .sec_system .color .item_03 {order:3}
}

@media all and (max-width: 767px) {
    .title_box {text-align:left !important}

    .sec_hero .txt_wrap .logo {max-width:200px}

    .desktop_view_open {background:none;padding:80px 0 24px}

    .sec_05 .list {margin-top:20px;flex-direction:column;}
    .sec_05 .list .item_02 {margin:-40px 0;z-index:4}
    .sec_05 .list .item_03 {z-index:5}
    .sec_05 .list .item span {font-size:13px}
    .sec_05 .list .item .tit {font-size:18px}

    .sec_08 .list {gap:0 14px;margin-top:24px}
    .sec_08 .list .item {border-radius:5px}

    .sec_system .font {gap:10px 16px}
    .sec_system .font .left {font-size:34px}
    .sec_system .font .right {font-size:14px}
}

@media all and (max-width: 359px) {
    .sec_system .font {flex-direction:column;align-items:flex-start;}
}