@charset "utf-8";

:root {
    --primary: #19BBFC;
}

.title_box {margin-bottom:60px}
.title_box.right {text-align:right}
.title_box .tit.navy {color:#131F76}
.title_box p {color:#565656}

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

.sec_info {background:#131F76}

.sec_04 {background:#E4E8FF}
.sec_04 .wrapper {max-width:1420px}
.sec_04 .list {display:flex;justify-content:space-between;gap:20px}
.sec_04 .list > div {display:flex;flex-direction:column;justify-content:space-between}
.sec_04 .list > div:nth-child(2) {align-self:center;}
.sec_04 .list img {box-shadow:0 4px 20px rgba(0,0,0,.15);}

.sec_05 {background:#FBFBFB;padding:var(--sec-padding) 0}
.sec_05 .list {display:flex;align-items:flex-start;justify-content:center;gap:0 50px}
.sec_05 .list .item {font-size:20px;font-weight:700;text-align:center;color:#131F76}
.sec_05 .list .item > span {display:block;margin-top:20px}
.sec_05 .list .item .circle {display:flex;align-items:center;justify-content:center;width:250px;height:250px;background:#E4E8FF;border-radius:200px}
.sec_05 .list .item_02 .circle {background:#131F76;color:#ffffff}
.sec_05 .list .item_03 .circle {background:linear-gradient(to right, #697EFF, #122077);color:#ffffff}

.sec_06 {padding:var(--sec-padding) 0}
.sec_06 .over_view .swiper-slide {width:400px}
.sec_06 .over_view .img_wrap {border-radius: 0 !important}

.view_list {display:flex;align-items:flex-start;gap:0 60px;width:100%}
.view_list > div {width:100%;border-radius:20px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.15);}
.view_list > div img {width:100%}

.sec_07 {background:linear-gradient(#ffffff, #ffffff 60%, rgba(192,206,255,.25) 85%, rgba(192,206,255,.25));padding:20px 0 var(--sec-padding)}
.sec_07 .wrapper {display:flex;align-items:flex-start;justify-content:space-between;max-width:1420px}
.sec_07 .title_box,
.sec_08 .title_box {flex:340px 0 0}
.sec_07 .view_list {margin-right:-400px}

.sec_08 {padding:var(--sec-padding) 0;position:relative}
.sec_08 .asset_img {max-width:884px;width:40%;position:absolute;bottom:0;right:0}
.sec_08 .wrapper {display:flex;align-items:flex-start;justify-content:space-between;flex-direction:row-reverse;max-width:1420px}
.sec_08 .view_list {margin-left:-400px}

.sec_09 {padding:var(--sec-padding) 0;background:#FBFBFB}
.sec_09 .wrapper {display:flex;align-items:flex-start;gap:0 100px;justify-content:center;}

.sec_10 {background:url('img/banner_02.png') no-repeat center/cover}
.sec_10 .wrapper {display:flex;align-items:center;justify-content:center;height:1080px;}
.sec_10 .logo {width:100%;max-width:565px}



@media (hover: hover) {}

@media all and (max-width: 1599px) {
    .sec_07 .view_list {margin-right:-100px}
    .sec_08 .view_list {margin-left:-100px}
}

@media all and (max-width: 1199px) {
    .title_box {margin-bottom:40px}
    .view_list {gap:0 30px}
    .view_list > div {border-radius:12px}

    .sec_09 .wrapper {gap:0 50px}

    .sec_10 .wrapper {height:600px}
    .sec_10 .logo {max-width:350px}
}

@media all and (max-width: 1023px) {
    .sec_07 .wrapper,
    .sec_08 .wrapper {display:block}
    .sec_08 .title_box {text-align:left}
    .sec_07 .view_list,
    .sec_08 .view_list {margin:0}
    .sec_08 .asset_img {display:none}

    .sec_09 .wrapper {flex-direction:column;align-items:center;gap:80px 0}
}

@media all and (max-width: 767px) {
    .title_box {margin-bottom:24px}
    .view_list {gap:0 14px}
    .view_list > div {border-radius:5px}

    .sec_06 .over_view .swiper-slide {width:100%}

    .sec_09 .title_box {text-align:left}

    .sec_10 .wrapper {height:250px}
    .sec_10 .logo {max-width:120px}
}