@charset "utf-8";

#main .toparea .topmenu{border-bottom-color: transparent;}
#main .toparea .topmenu .gnb{
    padding-right: 0;
    justify-content: center;
}
#main .toparea .topmenu .gnb > li{
    width: auto;
}
#main .toparea .topmenu .gnb > li > a{
    padding-left: 36px;
    padding-right: 36px;
}
#main .toparea .topmenu .gnb > li > a:hover{font-weight: 500;}
#main .header_btn{
    top: 16px;
}
#main .header_btn a{
    width: auto;
    padding: 0 19px;
    border: 1px solid transparent;
    line-height: 38px;
}

#main{}
#main #wrapper{
    overflow: hidden;
}
#main #container{padding-top:72px;position: relative;}
#main #container:before{display:block;position: absolute;top: 72px;left: 0;right: 0;height: 2632px;background-image: linear-gradient(to bottom, #f4f5f9 0%, #f4f5f9);}
#main .colgroup{}
#main section{
    position: relative;
}
#main .wrap{}
#main .sec_title{
    letter-spacing: -0.02em;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.35;
    color: #212529;
    position: relative;
    padding-top: 12px;
}
#main .sec_title:before{display:block;position: absolute;top: 0;left: 12px;width: 8px;height: 8px;border-radius: 50%;background-color: #3a3dce;}
#main .sec_text{
    font-size: 24px;
    line-height: 1.5;
    color: #555;
    margin-top: 20px;
}
#main .tab{
    display: flex;
    gap: 12px;
}
#main .tab li{}
#main .tab li button{
    letter-spacing: -0.02em;
    height: 49px;
    background-color: #fff;
    padding: 0 24px;
    border-radius: 25px;
    font-size: 20px;
    font-weight: 300;
    color: #333;
}
#main .tab li.active button{
    color: #fff;
    font-weight: 700;
    background-color: #212529 !important;
}
#main .slick-dots{

}

#main .sec1{
    padding: 20px 0 30px 0;
    text-align: center;
    background: url(/images/main/sec1_bg.png) no-repeat center top 687px;
    height: 450px;
}
#main .sec1 .wrap{}
#main .sec1 .title{
    font-weight: 200;
    font-size: 48px;
    color: #333;
    line-height: 1.25;
    letter-spacing: -0.03em;
}
#main .sec1 .title span{display: block;margin-top: 12px;font-size: 72px;font-weight: 800;color: #1c1e5f;}
#main .sec1 .list{
    margin-top: 30px;
    display: flex;
    gap: 26px;
    justify-content: center;
}
#main .sec1 .list li{
    margin-top: 10px;
    border-radius: 32px;
    box-shadow: -8px 16px 24px 0 rgba(17, 17, 17, 0.12);
    border: solid 1px #f5f5f5;
    background-image: linear-gradient(206deg, #fff 9%, #e3ebff 100%);
    width: 280px;
    padding: 35px 0 0 0;
    height: 280px;
    position: relative;
    transition: 1s 0.5s ease-in-out;
}
#main .sec1 .list li div{
    font-size: 26px;
    font-weight: 700;
    line-height: 1.67;
    color: #333;
    letter-spacing: -0.025em;
}
#main .sec1 .list li p{
    letter-spacing: -0.025em;
    font-size: 18px;
    line-height: 1.4;
    color: #555;
    margin-top: 6px;
    font-weight: 300;
}
#main .sec1 .list li img{}
#main .sec1 .list li:nth-child(1){
    transform: translateX(390px);
}
#main .sec1 .list li:nth-child(1) div{}
#main .sec1 .list li:nth-child(1) p{}
#main .sec1 .list li:nth-child(1) img{
    margin-top: 40px;
    max-width: 85%;
    height: auto;
}
#main .sec1 .list li:nth-child(2){
    background-image: linear-gradient(206deg, #3a3dce 9%, #1d1f68 100%);
    border-color: transparent;
    height: 300px;
    margin-top: 0;
    z-index: 1;
}
#main .sec1 .list li:nth-child(2) div{
    color: #fff;
    font-size: 38px;
    font-weight: 800;
}
#main .sec1 .list li:nth-child(2) p{
    margin-top: 20px;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
}
#main .sec1 .list li:nth-child(2) img{
    margin: 7px 0 0 -169px;
    max-width: 100%;
    height: auto;
}
#main .sec1 .list li:nth-child(3){
    transform: translateX(-390px);
}
#main .sec1 .list li:nth-child(3) div{}
#main .sec1 .list li:nth-child(3) p{}
#main .sec1 .list li:nth-child(3) img{
    max-width: 85%;
    height: auto;
}
#main .sec1 .list.aos-animate li:nth-child(1){
    transform: rotate(-15deg);
}
#main .sec1 .list.aos-animate li:nth-child(3){
    transform: rotate(15deg);
}

#main .sec2{
    text-align: center;
    height: 380px;
    margin-top: 100px;
}
#main .sec2 .wrap{
    background: url(/images/main/sec2_bg.png) no-repeat left 19px top 92px;
    margin-left: 380px;
}
#main .sec2 .title{
    letter-spacing: -0.02em;
    font-size: 48px;
    font-weight: 900;
    line-height: 48px;
}
#main .sec2 .title span:nth-child(1){
    background-image: linear-gradient(to left, #3a3dce 24%, #1d1f68 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#main .sec2 .title span:nth-child(2){
    display: inline-block;
    font-size: 0;
    width: 65px;
    height: 38px;
    background: url(/images/main/sec2_24.png) no-repeat;
    background-size: contain;
    vertical-align: top;
    margin-top: 5px;
}
#main .sec2 .text{
    letter-spacing: -0.03em;
    font-size: 16px;
    line-height: 1.36;
    margin-top: 12px;
    color: #555;
}
#main .sec2 .list{
    margin-top: 50px;
    display: flex;
    gap: 16px;
    will-change: transform;
}
#main .sec2 .list li{
    background-color: #fff;
    border-radius: 12px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    min-width: 238px;
}
#main .sec2 .list li.mw_auto{min-width:auto;}
#main .sec2 .list li img{}

#main .sec3{
    margin-top: 160px;
    height: 1055px;
}
#main .sec3 .wrap{}
#main .sec3 .sec_title{}
#main .sec3 .tab{
    margin-top: 72px;
}
#main .sec3 .tab li{}
#main .sec3 .tab li button{}
#main .sec3 .tab li.active button{}
#main .sec3 .panel{
    margin-top: 32px;
}
#main .sec3 .panel > li{
    display: none;
}
#main .sec3 .panel > li.active{
    display: block;
}
#main .sec3 .panel .panel_list{
    display: flex;
    gap: 24px;
}
#main .sec3 .panel .panel_list > li{
    width: 320px;
}
#main .sec3 .panel .panel_list > li a{
    display:block;
    height: 360px;
    background-color: #586172;
    border-radius: 16px;
    padding: 56px 48px 0 48px;
    position: relative;
}
#main .sec3 .panel .panel_list > li a .num{
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.33;
    font-size: 24px;
}
#main .sec3 .panel .panel_list > li a .title{
    letter-spacing: -0.02em;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.31;
    margin-top: 12px;
    color: #fff;
}
#main .sec3 .panel .panel_list > li a .text{
    letter-spacing: -0.02em;
    font-size: 18px;
    line-height: 1.56;
    margin-top: 20px;
    color: #fff;
}
#main .sec3 .panel .panel_list > li a .arrow{
    letter-spacing: -0.02em;
    font-size: 0;
    line-height: 0;
    position: absolute;
    left: 48px;
    bottom: 57px;
    display: flex;
}
#main .sec3 .panel .panel_list > li a .arrow:after{display:block;width: 20px;height: 20px;background: url(/images/main/sec3_arrow.png) no-repeat;}
#main .sec3 .panel .panel_list > li a img{}
#main .sec3 .panel .panel_list > li:nth-child(1){
    width: calc(100% - 688px);
}
#main .sec3 .panel .panel_list > li:nth-child(1) a{

    background: #3a3dce url(/images/main/sec3_bg.png) no-repeat right bottom;
}
#main .sec3 .panel .panel_list > li:nth-child(1) a .num{}
#main .sec3 .panel .panel_list > li:nth-child(1) a .title{}
#main .sec3 .panel .panel_list > li:nth-child(1) a .text{}
#main .sec3 .panel .panel_list > li:nth-child(1) a .arrow{
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    font-weight: 500;
}
#main .sec3 .panel .panel_list > li:nth-child(1) a img{
    position: absolute;
    right: 72px;
    bottom: 0;
}
#main .sec3 .banner{
    margin-top: 14px;
}
#main .sec3 .banner .banner_list{}
#main .sec3 .banner .banner_item{}
#main .sec3 .banner .banner_item img{}
#main .sec3 .banner .slick-dots{
    position: absolute;
    right: 40px;
    bottom: 65px;
}
#main .sec3 .banner .slick-dots li{}
#main .sec3 .banner .slick-dots li button{}
#main .sec3 .banner .slick-dots li.slick-active button{}

#main .sec4{
    margin-top: 140px;
    padding-bottom: 140px;
}
#main .sec4 .wrap{}
#main .sec4 .sec_title{}
#main .sec4 .tab{
    margin-top: 62px;
}
#main .sec4 .tab li{}
#main .sec4 .tab li button{
    background-color: #f4f5f9;
}
#main .sec4 .tab li.active button{}
#main .sec4 .panel{
    margin: 34px -8px 0 -8px;
}
#main .sec4 .panel .panel_item{
    margin: 0 8px;
}
#main .sec4 .panel .panel_item a{
    border-radius: 12px;
    background-color: #d3eaff;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#main .sec4 .panel .panel_item:nth-child(2n) a{
    background-color: #d4dfff;
}
#main .sec4 .panel .panel_item a img{
    width: 100px;
}
#main .sec4 .panel .panel_item a span{
    letter-spacing: -0.025em;
    font-size: 20px;
    font-weight: 500;
    color: #212529;
    line-height: 1.3;
    height: 52px;
    display: flex;
    align-items: center;
}
#main .sec4 .panel .slick-dots{
    margin-top: 40px;
    justify-content: center;
}
#main .sec4 .panel .slick-dots li{}
#main .sec4 .panel .slick-dots li button{}
#main .sec4 .panel .slick-dots li.slick-active button{}
#main .sec4 .banner{
    margin-top: 120px;
    background: url(/images/main/sec4_banner_bg.png) no-repeat;
    height: 295px;
    padding: 64px;
}
#main .sec4 .banner .banner_text{
    letter-spacing: -0.02em;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.46;
    color: #212529;
}
#main .sec4 .banner .banner_btn{
    margin-top: 32px;
    display: flex;
    gap: 20px;
}
#main .sec4 .banner .banner_btn a{
    letter-spacing: -0.02em;
    line-height: 59px;
    background-color: #fff;
    border-radius: 30px;
    padding: 0 24px;
    display: flex;
    gap: 12px;
    min-width: 180px;
    font-size: 20px;
    font-weight: 600;
    color: #586172;
    align-items: center;
    justify-content: space-between;
}
#main .sec4 .banner .banner_btn a:after{display:block;background: url(/images/main/sec4_banner_arrow.png) no-repeat;width: 15px;height: 13px;}

#main .sec5{
    padding: 159px 0 0 0;
    background-image: linear-gradient(to bottom, #f4f5f9, rgba(244, 245, 249, 0) 53%);
}
#main .sec5 .wrap{}
#main .sec5 .sec_box{position: relative;}
#main .sec5 .sec_box .sec_title{}
#main .sec5 .sec_box .sec_text{}
#main .sec5 .sec_box img{
    position: absolute;
}
#main .sec5 .sec_box:nth-child(1){
    padding: 77px 0 187px 0;
}
#main .sec5 .sec_box:nth-child(1) .sec_title{}
#main .sec5 .sec_box:nth-child(1) .sec_text{}
#main .sec5 .sec_box:nth-child(1) img{
    right: 38px;
    top: 0;
}
#main .sec5 .sec_box:nth-child(2){
    padding: 364px 0 427px 799px;
}
#main .sec5 .sec_box:nth-child(2) .sec_title{}
#main .sec5 .sec_box:nth-child(2) .sec_text{}
#main .sec5 .sec_box:nth-child(2) img{
    top: 59px;
    left: 100px;
}
#main .sec5 .sec_box:nth-child(3){
    padding: 85px 0 187px 0;
}
#main .sec5 .sec_box:nth-child(3) .sec_title{}
#main .sec5 .sec_box:nth-child(3) .sec_text{}
#main .sec5 .sec_box:nth-child(3) img{
    top: 11px;
    right: 38px;
}

#main .sec6{
    margin-top: 157px;
}
#main .sec6 .wrap{}
#main .sec6 .sec_link{
}
#main .sec6 .sec_link a{
    border-radius: 12px;
    box-shadow: 0 0 24px 0 rgba(17, 17, 17, 0.08);
    background-image: linear-gradient(93deg, #586172 28%, #6282b3 100%);
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 58px 0 60px;
}
#main .sec6 .sec_link a span{
    letter-spacing: -0.025em;
    color: #fff;
}
#main .sec6 .sec_link a .text{
    font-size: 24px;
    font-weight: 700;
    line-height: 1.58;
}
#main .sec6 .sec_link a .arrow{
    font-size: 24px;
    line-height: 1.58;
    display: flex;
    gap: 15px;
    align-items: center;
}
#main .sec6 .sec_link a .arrow:after{display:block;background: url(/images/main/sec6_link_arrow.png) no-repeat;width: 30px;height: 26px;}
#main .sec6 .sec_cs{
    margin-top: 40px;
    border-radius: 12px;
    box-shadow: 0 2px 12px 0 rgba(17, 17, 17, 0.12);
    background-color: #fff;
    padding: 0 64px;
    height: 198px;
    display: flex;
    gap: 220px;
    align-items: center;
}
#main .sec6 .sec_cs .title{
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 40px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
    color: #111;
}
#main .sec6 .sec_cs .title:before{display:block;background: url(/images/main/sec6_cs_icon.png) no-repeat;width: 109px;height: 102px;}
#main .sec6 .sec_cs ul{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#main .sec6 .sec_cs ul li{
    letter-spacing: -0.02em;
    display: flex;
    font-size: 20px;
    font-weight: 500;
    color: #111;
    line-height: 1.25;
}
#main .sec6 .sec_cs ul li div{
    width: 128px;
    color: #555;
    font-weight: 400;
    margin-right: 16px;
}
#main .sec6 .sec_cs ul li span{
    color: #777;
    font-weight: 300;
    margin-left: 2px;
}