@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --primary: #5D5DFF;
}
.title_box {margin-bottom:60px}
.title_box p {color:#565656}

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

.sec_info {background:#E5E9FF;color:#222222}
.sec_info .cont {color:#343434}

.sec_03 {padding:var(--sec-padding) 0}
.sec_04 .over_view {padding:var(--sec-padding) 0;background:#F5F5F5}

.sec_05 {padding:var(--sec-padding) 0}
.sec_05 .wrapper {display:flex;align-items:flex-start;justify-content:space-between;gap:30px;max-width:1420px}
.sec_05 .list {width:52%;max-width:762px}
.sec_05 .list .item {text-align:center;height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#ffffff;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.15);}
.sec_05 .list .item + .item {margin-top:30px}
.sec_05 .list .item .tit {display:block;font-size:24px;font-weight:700;color:#6B6EE6;font-family:"Montserrat", sans-serif;}
.sec_05 .list .item p {font-weight:500;font-size:18px;color:#121212;margin-top:15px}

.sec_06 {padding:calc(var(--sec-padding)/2) 0 var(--sec-padding)}
.sec_06 .wrapper {max-width:1420px}
.sec_06 .cont {display:flex;justify-content:space-between;gap:0 30px;}
.sec_06 .cont > div {display:flex;flex-direction:column;align-items:flex-start;}
.sec_06 .cont > div > .tit {display:block;font-size:24px;font-weight:500;color:#6B6EE6;margin-bottom:24px}
.sec_06 .color {max-width:638px;width:100%}
.sec_06 .color .list {display:grid;grid-template-columns:repeat(3, 1fr);gap:30px;width:100%}
.sec_06 .color .list > div {display:flex;align-items:center;justify-content:center;text-align:center;width:100%;height:160px;border-radius:10px;background:#6B6EE6;color:#ffffff;font-size:18px;font-weight:500}
.sec_06 .color .list > div:nth-child(2) {background:#00C0FF}
.sec_06 .color .list > div:nth-child(3) {background:#00A6DC}
.sec_06 .color .list > div:nth-child(4) {background:#E5E9FF;color:#121212}
.sec_06 .color .list > div:nth-child(5) {background:#E5F4FF;color:#121212}
.sec_06 .color .list > div:nth-child(6) {background:linear-gradient(125deg, #5D5DFF, #08D1D9)}
.sec_06 .font .list {flex:1;display:flex;flex-direction:column;justify-content:space-between;}
.sec_06 .font .list > div {display:flex;align-items:center;font-size:18px;}
.sec_06 .font .list > div > p:first-child {width:300px;min-width:300px}
.sec_06 .font .list > div:nth-child(2) {font-weight:500}
.sec_06 .font .list > div:nth-child(3) {font-weight:600}
.sec_06 .font .list > div:nth-child(4) {font-weight:700}
.sec_06 .font .list > div:nth-child(5) {font-weight:800}

.sec_07 {background:#E5F4FF;padding:var(--sec-padding) 0}

.sec_08 {background:url('img/sec_08_bg.png') no-repeat center/100%;padding:var(--sec-padding) 0}
.sec_08 .wrapper {max-width:1440px}
.sec_08 .list > div {display:flex;align-items:flex-start;gap:0 24px;}
.sec_08 .list > div > div {box-shadow:0 4px 30px rgba(0,0,0,.25);border-radius:20px;overflow:hidden}
.sec_08 .list > div img {width:calc(100% + 2px);max-width:calc(100% + 2px)}
.sec_08 .list > div + div {margin-top:60px}

.sec_09 {background:#6B6EE6;position:relative}
.sec_09 .txt_slide {position:absolute;top:-5%;left:0;width:100%}
.sec_09 .txt_slide p::before {background:#121212}

.sec_10 {padding:var(--sec-padding) 0}
.sec_10 .wrapper {max-width:1440px}
.sec_10 .list {display:flex;align-items:flex-start;justify-content:space-between;gap:0 20px;}
.sec_10 .list > div {max-width:375px;box-shadow:0 4px 20px rgba(0,0,0,.15);border-radius:20px;overflow:hidden}
.sec_10 .list > div img {width:calc(100% + 2px);max-width:calc(100% + 2px)}

.sec_11 {display:flex;align-items:center;justify-content:center;background:url('img/sec_11_bg.jpg') no-repeat center/cover;height:645px;padding:20px}
.sec_11 img {max-width:468px;width:100%;display:block;}



@media (hover: hover) {}

@media all and (max-width: 1199px) {
    .title_box {margin-bottom:42px}
    .sec_03 .over_view {margin-top:80px}
    
    .sec_05 .list .item {height:180px}
    .sec_05 .list .item .tit {font-size:20px}
    .sec_05 .list .item p {font-size:15px}

    .sec_06 .cont > div > .tit {font-size:20px}
    .sec_06 .font .list > div {font-size:16px}
    .sec_06 .color {max-width:480px}
    .sec_06 .color .list {gap:20px}
    .sec_06 .color .list > div {height:130px;font-size:16px;padding:10px}

    .sec_11 {height:480px}
    .sec_11 img {max-width:356px}
    /*
    */
}

@media all and (max-width: 1023px) {
    .sec_05 .wrapper {flex-direction:column;gap:0}
    .sec_05 .list {width:100%;max-width:100%}

    .sec_06 .cont {flex-direction:column;gap:24px}
    .sec_06 .font .list {width:100%}
    .sec_06 .font .list > div + div {margin-top:20px}
    .sec_06 .font .list > div > p:first-child {min-width:initial;width:auto;flex:50% 0 0}
    .sec_06 .color {max-width:100%}
}

@media all and (max-width: 767px) {
    .title_box {margin-bottom:24px}
    .sec_03 .over_view {margin-top:48px}
    
    .sec_05 .list .item {height:150px}
    .sec_05 .list .item .tit {font-size:18px}
    .sec_05 .list .item p {font-size:13px;margin-top:10px}

    .sec_06 .cont > div > .tit {font-size:14px;margin-bottom:10px}
    .sec_06 .font .list > div {font-size:14px}
    .sec_06 .color .list {gap:10px}
    .sec_06 .color .list > div {height:100px;font-size:14px}
    
    .sec_08 .list > div {gap:10px}
    .sec_08 .list > div + div {margin-top:15px}
    .sec_08 .list > div > div {border-radius:5px}

    .sec_09 .txt_slide {top:0;position:initial}
    
    .sec_10 .list {gap:10px}
    .sec_10 .list > div {border-radius:5px}
    
    .sec_11 {background-image:url('img/sec_11_bg_mb.jpg');height:330px}
    .sec_11 img {max-width:250px}

    .page_view .list {margin-top:24px}
}

@media all and (max-width: 365px) {
    .sec_06 .font .list > div {font-size:13px}
    .sec_06 .font .list > div > p:first-child {flex-basis:158px}
}