@charset "utf-8";

:root {
    --primary: #1668FF;
}
.title_box {margin-bottom:60px}
.title_box p {color:#565656}
.wrapper {max-width:1440px}

.sec_hero .txt_wrap .logo {max-width:640px}
.sec_hero .txt_wrap .tit .color {color:var(--primary)}
.sec_hero .view_more .round {background:var(--primary)}

.sec_info {background:linear-gradient(135deg, #52E5E7, #130CB7)}
.sec_info .cont {color:#FFFFFF}

.sec_03 {padding:var(--sec-padding) 0}
.sec_03 .over_view {margin-top:120px}

.sec_04 {background:url('img/sec_04_bg.jpg') no-repeat center bottom/cover;color:#ffffff;padding-top:var(--sec-padding)}
.sec_04 .keywords {display:grid;grid-template-columns:repeat(2, 1fr);gap:0 60px}
.sec_04 .keywords > div {display:flex;align-items:center;justify-content:space-between;padding:40px 0}
.sec_04 .keywords .tit {display:block;font-size:54px;font-weight:700}
.sec_04 .keywords p {font-size:18px;text-align:right}
.sec_04 .list {display:grid;grid-template-columns:repeat(2, 1fr);gap:40px;margin-top:80px}
.sec_04 .list .item .tit {display:block;font-size:24px;margin-bottom:24px;text-transform:uppercase;}
.sec_04 .list .item .box {display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;border:solid 1px #33A2FF;border-radius:20px;backdrop-filter:blur(40px);padding:60px 20px;text-align:center}
.sec_04 .list .item .box span {display:block;font-size:64px;font-weight:700;margin-bottom:40px}
.sec_04 .list .item .box p {font-size:24px;font-weight:300;word-break:break-all}
.sec_04 .list .item_03 {grid-column:span 2;}
.sec_04 .list .item_03 .box {display:flex;align-items:flex-start;justify-content:center;flex-direction:row;gap:0 80px}
.sec_04 .list .item_03 .box .round {display:flex;align-items:center;justify-content:center;width:200px;height:200px;border-radius:300px}
.sec_04 .list .item_03 .box .round span {display:block;width:50%;height:50%;background:#ffffff;border-radius:300px;margin:0}
.sec_04 .list .item_03 .box .txt {display:block;font-size:24px;font-weight:600;margin:30px 0 0;text-align:center}
.sec_04 .list .item_03 .box .li1 .round {background:linear-gradient(to right, #00A1FF, #002BFF)}
.sec_04 .list .item_03 .box .li2 .round {background:#1A1A22}
.sec_04 .list .item_03 .box .li3 .round {background:#1668FF}
.sec_04 .list .item_03 .box .li4 .round {background:#ffffff}
.sec_04 .list .item_03 .box .li4 .round span {box-shadow:0 3px 8px rgba(0,0,0,.2)}
.sec_04 .img_wrap {max-width:1060px;width:100%;margin:80px auto 0}

.sec_05 .title_box .tit,
.sec_08 .title_box .tit {color:var(--primary)}
.sec_04 {background:url('img/sec_04_bg.jpg') no-repeat center bottom/cover;color:#ffffff;padding-top:var(--sec-padding)}
.sec_05.page_view .list > div:nth-child(2) {margin:0}

.sec_06 {background:url('img/sec_05_bg.jpg') no-repeat center/cover;padding:var(--sec-padding) 0}
.sec_06 .list {display:grid;grid-template-columns:repeat(3, 1fr);gap:160px 40px}

.sec_08 {background:url('img/sec_08_bg.jpg') no-repeat center/cover}
.sec_08.page_view .list > div {box-shadow:none}
.sec_08.page_view .list > div:nth-child(2) {margin:0}



@media (hover: hover) {}

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

    .sec_03 .over_view {margin-top:80px}
    .sec_04 .keywords .tit {font-size:40px}
    .sec_04 .keywords p {font-size:16px;text-align:left}
    .sec_04 .keywords > div {flex-direction:column;align-items:flex-start;gap:10px}
    .sec_04 .list {gap:20px}
    .sec_04 .keywords > div {padding:30px 0}
    .sec_04 .list .item .box {border-radius:15px;min-height:280px;gap:0 40px}
    .sec_04 .list .item .tit {font-size:20px;margin-bottom:10px}
    .sec_04 .list .item .box span {font-size:44px;margin-bottom:28px}
    .sec_04 .list .item .box p {font-size:18px}
    .sec_04 .list .item_03 .box .round {width:110px;height:110px}
    .sec_04 .list .item_03 .box .txt {font-size:14px;margin-top:10px}
}

@media all and (max-width: 1023px) {
}

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

    .sec_03 .over_view {margin-top:48px}

    .sec_04 .keywords {display:flex;flex-direction:column;}
    .sec_04 .keywords .tit {font-size:26px}
    .sec_04 .keywords p {font-size:14px}
    .sec_04 .keywords > div {padding:16px 0}
    .sec_04 .list {display:flex;flex-direction:column;margin-top:30px}
    .sec_04 .list .item .box {border-radius:10px;min-height:160px;padding:24px 20px}
    .sec_04 .list .item .tit {font-size:14px}
    .sec_04 .list .item .box span {font-size:26px;margin-bottom:16px}
    .sec_04 .list .item .box p {font-size:14px}
    .sec_04 .list .item_03 .box {display:grid;grid-template-columns:repeat(2, 1fr);gap:20px}
    .sec_04 .list .item_03 .box .round {margin:0 auto}

    .sec_06 .list {grid-template-columns:repeat(2, 1fr);gap:20px 15px}
}