@charset "utf-8";

:root {
    --primary: #053EFB;
}
.sec_hero .txt_wrap .logo {max-width:465px}
.sec_hero .txt_wrap .tit .color {color:#96A4FF}
.sec_hero .view_more .round {background:#0037DC}

.sec_info {background:#072FA5}

.sec_03 {padding:150px 0 300px}
.sec_03 .over_view {margin-top:120px}

/* 디자인시스템 */
.sec_system .cont {display:flex;margin-top:60px}
.sec_system .cont > div {width:100%}
.sec_system .font {display:flex;align-items:center;justify-content:center;background:#181818;color:#fff;text-align:center}
.sec_system .font .inner1 {display:flex;align-items:flex-start;justify-content:center;gap:0 100px}
.sec_system .font .sub {display:block;color:#696969;font-size:16px;font-weight:700}
.sec_system .font .name {display:block;color:#96A4FF;font-size:20px;font-weight:700;margin-top:10px}
.sec_system .font strong {font-size:200px}
.sec_system .color .item {height:215px}
.sec_system .color .item_01 {background:#053EFB}
.sec_system .color .item_02 {background:#081541}
.sec_system .color .item_03 {background:#F4F8FF;color:#595959}

.sec_combo {background:url('img/combo_bg.jpg') no-repeat center bottom/cover;color:#fff;padding:200px 0}
.sec_combo .title_box .sub {color:#fff}
.sec_combo .title_box p {font-weight:300}
.sec_combo .title_box p strong {font-weight:700}

.sec_05 .img_wrap {display:flex;align-items:flex-start;justify-content:center;gap:30px;margin:76px auto 0}
.sec_05 .img_wrap > div {width:100%;max-width:320px}
.sec_05 .img_wrap > div:last-child {margin-top:32px}

.sec_06 {margin-top:220px}
.sec_06 .title_box {display:flex;align-items:flex-start;justify-content:space-between;gap:30px;}
.sec_06 .title_box p {max-width:620px;margin:0}
.sec_06 .title_box .point {display:flex;align-items:center;gap:0 10px;margin-top:25px;font-size:24px;font-weight:700}
.sec_06 .title_box .point::before {content:'';display:block;width:6px;height:6px;background:var(--primary);border-radius:10px}
.sec_06 .title_box > .point {display:none}
.sec_06 .list {display:flex;align-items:center;justify-content:center;width:fit-content;position:relative;margin:100px auto 0}
.sec_06 .list::before,
.sec_06 .list::after {content:'';display:block;width:100vw;height:1px;background:#408CFF;position:absolute;top:50%;left:100%;transform:translateY(-50%)}
.sec_06 .list::after {left:auto;right:100%}
.sec_06 .list .item {display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px 0;text-align:center;width:420px;height:420px;border:solid 1px #408CFF;border-radius:400px;padding:20px}
.sec_06 .list .item:nth-child(2) {margin:0 -40px}
.sec_06 .list .item .tit {display:block;font-size:34px;font-weight:700;line-height:1.4}
.sec_06 .list .item p {font-size:20px;font-weight:700}

.page_view {background:linear-gradient(#E0E8FF 20%, #ffffff 30%, #ffffff);}

.sec_09 {background:linear-gradient(#ffffff, #ffffff 70%, #E0E8FF 80%)}
.sec_09 .title_box {padding:200px 20px 60px}

.sec_10 {background:url('img/sec_10_bg.jpg') no-repeat center top/cover;padding:200px 0 100px;position:relative}
.sec_10 .img_wrap {width:100%;max-width:1800px;margin:0 auto;z-index:2;position:relative}
.sec_10 .img_wrap img {width:100%}
.sec_10 .asset {width:100%;max-width:1900px;position:absolute;bottom:0;left:50%;transform:translateX(-50%)}


@media (hover: hover) {}

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

    .sec_03 {padding:120px 0 200px}
    .sec_03 .over_view {margin-top:80px}

    /* 디자인시스템 */
    .sec_system .cont {margin-top:40px}
    .sec_system .color .item {height:150px}
    .sec_system .font .inner1 {gap:0 60px}
    .sec_system .font .sub {font-size:14px}
    .sec_system .font .name {font-size:17px}
    .sec_system .font strong {font-size:150px}

    .sec_combo {padding:140px 0}

    .sec_05 .img_wrap {margin-top:50px}

    .sec_06 {margin-top:160px}
    .sec_06 .title_box .point {font-size:20px}
    .sec_06 .list {margin-top:60px}
    .sec_06 .list .item {width:320px;height:320px}
    .sec_06 .list .item .tit {font-size:26px}
    .sec_06 .list .item p {font-size:15px}

    .sec_09 .title_box {padding:120px 20px 40px}

    .sec_10 {padding:160px 0 100px}
}

@media all and (max-width: 1023px) {
    .sec_06 .title_box {flex-direction:column;gap:20px}
    .sec_06 .title_box .point {display:none}
    .sec_06 .title_box > .point {display:flex;margin-top:4px}
    .sec_06 .list .item {width:250px;height:250px;gap:14px 0}
    .sec_06 .list .item:nth-child(2) {margin:0 -20px}
}

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

    .sec_03 {padding:80px 0 100px}
    .sec_03 .over_view {margin-top:48px}

    /* 디자인시스템 */
    .sec_system .cont {flex-direction:column;margin-top:24px}
    .sec_system .color .item {font-size:14px;padding:20px}
    .sec_system .font {padding:40px 20px 24px}
    .sec_system .font .sub {font-size:12px}
    .sec_system .font .name {font-size:14px}
    .sec_system .font strong {font-size:100px}

    .sec_combo {padding:80px 0}

    .sec_05 .wrapper {max-width:400px}
    .sec_05 .title_box {text-align:left;align-items:flex-start}
    .sec_05 .img_wrap {flex-direction:column;gap:20px;align-items:center;margin:24px 0 0 0}
    .sec_05 .img_wrap img {width:100%}
    .sec_05 .img_wrap > div {width:100%;max-width:initial}
    .sec_05 .img_wrap > div:last-child {margin:0}

    .sec_06 {margin-top:100px}
    .sec_06 .title_box .point {font-size:15px}
    .sec_06 .list {margin-top:20px;flex-direction:column;}
    .sec_06 .list::before, .sec_06 .list::after {display:none}
    .sec_06 .list .item:nth-child(2) {margin:-20px 0}
    .sec_06 .list .item .tit {font-size:18px}
    .sec_06 .list .item p {font-size:13px}

    .sec_09 .title_box {padding:80px 20px 24px}

    .sec_10 {padding:80px 0}
}