@charset "utf-8";

:root {
    --primary: #4DA6FF;
}
.wrapper {max-width:1440px}
.title_box {margin-bottom:60px}
.title_box .sub {color:#4D62FF}
.title_box p {color:#565656}

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

.sec_info {background:linear-gradient(125deg, #4DA6FF, #4DA6FF 60%, #8BE0FE)}
.sec_info .cont {color:#ffffff}

.sec_03 {padding:var(--sec-padding) 0;position:relative}
.sec_03::after {content:'';display:block;width:100vw;height:50vw;background:#8E86FF;border-radius:100%;position:absolute;bottom:0;left:-10%;filter:blur(100px);opacity:.2;z-index:-1;transform:translateY(50%)}
.sec_03 .desktop_view {position:relative}
.sec_03 .desktop_view::before {content:'';display:block;width:40vw;height:40vw;background:#8E86FF;border-radius:100%;position:absolute;top:0;right:-10%;filter:blur(100px);opacity:.15}
.sec_03 .over_view {margin-top:120px}

.sec_04 {padding-top:calc(var(--sec-padding)/2)}
.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:#4D62FF;font-size:20px;font-weight:700;margin-top:10px}
.sec_system .font strong {font-size:200px}
.sec_system .color {display:grid;grid-template-columns:repeat(2, 1fr);}
.sec_system .color .item {width:100%;height:320px}
.sec_system .color .item_01 {background:#4DA6FF}
.sec_system .color .item_02 {background:#99DDFF}
.sec_system .color .item_03 {background:#4D62FF}
.sec_system .color .item_04 {background:#191919}

.sec_combo {padding-top:var(--sec-padding) 0}

.sec_05 {padding-top:var(--sec-padding)}
.sec_05 .list {display:grid;grid-template-columns:repeat(3, 1fr);gap:40px;position:relative}
.sec_05 .list::after {content:'';display:block;width:620px;height:620px;background:#8E86FF;border-radius:100%;position:absolute;top:0;left:90%;filter:blur(100px);opacity:.2;z-index:-1}
.sec_05 .list::before {content:'';display:block;width:620px;height:620px;background:#86FFCE;border-radius:100%;position:absolute;top:80%;right:90%;filter:blur(100px);opacity:.2;z-index:-1}
.sec_05 .list .item .img_wrap {border-radius:20px;overflow:hidden;box-shadow:4px 4px 30px rgba(125,126,166,.2)}
.sec_05 .list .item span {display:block;font-size:20px;font-weight:600;margin-top:20px}

.sec_06 {padding-top:var(--sec-padding)}
.sec_06 .img_wrap {width:100%;max-width:734px;margin:0 auto;position:relative;overflow:visible}
.sec_06 .img_wrap::before {content:'';display:block;width:200%;height:200%;background:url('img/sec_06_02.png') no-repeat center/100%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:-1}
.sec_06 .title_box p {max-width:400px}
.sec_06 .cont {margin-top:-200px}
.txt_slide {margin-top:160px}
.txt_slide p::before {background:#222222}
.txt_slide p:nth-child(even) {color:#4DA6FF}

.sec_07 {background:var(--primary);color:#ffffff}
.sec_07 .title_box p,
.sec_07 .title_box .sub {color:#ffffff}

.sec_08 {background:#E7F4FA;}

.sec_10 {padding:var(--sec-padding) 0;background:url('img/sec_10_bg.png') no-repeat center bottom/cover}
.sec_10 .list {display:flex;align-items:flex-start;gap:40px}
.sec_10 .list > div:nth-child(even) {margin-top:80px}
.sec_10 .list > div img {border-radius:20px;width:100%;display:block;box-shadow:25px 15px 250px rgba(9,20,50,.1)}
.sec_10 .list > div img + img {margin-top:40px}


@media (hover: hover) {}

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

    .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_05 .list {gap:20px}
    .sec_05 .list .item .img_wrap {border-radius:12px}
    .sec_05 .list .item span {font-size:16px}

    .sec_06 .cont {margin:0}
    .sec_06 .img_wrap {max-width:550px}
    .txt_slide {margin-top:120px}

    .sec_10 .list {gap:20px}
    /*
    */
}

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

@media all and (max-width: 767px) {
    .title_box {margin-bottom:24px}
    
    .sec_hero .txt_wrap .logo {max-width:255px}
    .sec_03 .over_view {margin-top:48px}
    
    .sec_system .cont {flex-direction:column;margin-top:24px}
    .sec_system .color .item {height:120px;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_05 .list {gap:16px;grid-template-columns:repeat(2, 1fr);}
    .sec_05 .list .item .img_wrap {border-radius:5px}
    .sec_05 .list .item span {font-size:12px;margin-top:16px}

    .txt_slide {margin-top:80px}
    .page_view .list {flex-direction:column;align-items:center;gap:12px;}
    .sec_10 .list {display:grid;grid-template-columns:repeat(2, 1fr);}
    .sec_10 .list > div img {border-radius:5px}
    .sec_10 .list > div img + img {margin-top:12px}
    .sec_10 .list > div:nth-child(even) {margin-top:50px}
}