/*main*/
#mainVis{width: 100%; height: 55rem; background: url("../images/main/mainVis.jpg")no-repeat center; background-size: cover;  position: relative;}
#mainVis .inner{position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%);}
#mainVis .top-box{}
#mainVis .top-box .tit{font-size: 4rem; font-weight: 700; line-height: 5.875rem; text-align: center;}
#mainVis .top-box .tit img{width: 36.25rem; height: 5.93rem;}
#mainVis .top-box .desc{margin-top: 1.875rem; font-size: 1.375rem; text-align: center;}
#mainVis .top-box .btn-box{margin-top: 3.125rem; text-align: center;}
#mainVis .top-box .btn-box .btn{border-radius: 6.25rem;}
#mainVis .top-box .btn-box .btn + .btn{margin-left: 0.625rem;}
#mainVis .bt-box{display: flex; justify-content: space-between; font-size: 1.125rem; line-height: 1.625rem; font-weight: 600; margin-top: 11rem;}
#mainVis .bt-box img{margin-left: 1.5625rem;}
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 1s ease forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.main .sec-01{ padding: 6.25rem 0 12.5rem 0;}
.main .sec-01 .title{text-align: center;}
.main .sec-01 .d-flex{ gap: 0 1.875rem;}
/*.main .sec-01 li + li{margin-top: 3.125rem;}*/
.main .sec-01 .d-flex .left{width: 60%;}
.main .sec-01 .d-flex .left strong{font-weight: 300; font-size: 6rem; line-height: 6.875rem; color:#1508CA; }
.main .sec-01 .d-flex .left .txt{ margin-top: 5rem; padding-left: 1.875rem; border-left: 1px solid #1508CA;}
.main .sec-01 .d-flex .left .txt b{display: block; font-weight: 700; font-size: 1.875rem; line-height: 2.5rem; margin-bottom: 2.5rem;}
.main .sec-01 .d-flex .left .txt p{font-size: 1.25rem; line-height: 1.875rem;}
.main .sec-01 .d-flex .right img{ width: 100%; max-width: 31rem; box-shadow: 3.625rem 4.25rem 0 #F4F4F4;}

.main .sec-02{padding: 5rem 0 6.25rem 0; position: relative;}
.main .sec-02 .sec02-bg{width: 100%; height: 29.375rem; background: url("../images/main/sec02_bg.jpg")no-repeat top center; background-size: cover; position: absolute; z-index: -1; top: 0; left: 0;}
.main .sec-02 .title p{margin-top: 1.25rem}
.main .sec-02 .d-flex{gap: 0 1.875rem; margin-top: 5rem;}
.main .sec-02 .d-flex li{}
.main .sec-02 .d-flex li{}
.main .sec-02 .d-flex li img{width: 100%;}
.main .sec-02 .d-flex li .txt{margin-top: 1.875rem; }
.main .sec-02 .d-flex li .txt b{color: #3528F3; font-weight: 300; font-size: 4rem;}
.main .sec-02 .d-flex li .txt b::after{content: '/'; font-size: 1.875rem}
.main .sec-02 .d-flex li .txt p{font-size: 1.25rem; line-height: 1.875rem; color: #161616; margin-top: 1.25rem;}

.main .sec-03{padding: 6.25rem 0 ; background: #F9F9F9;}
.main .sec-03 .title{text-align: center;}
.main .sec-03 .box{margin-top: 3.125rem; background: #fff; position: relative; height: 54.375rem;}
.main .sec-03 .box .img{position: absolute; left: 50%; top: 6.125rem; transform: translateX(-50%); width: 32rem; height: 35rem;}
.main .sec-03 .box .img img{width: 100%;}
.main .sec-03 .box .txt{width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 3.125rem; }
.main .sec-03 .box .txt ul{position: relative; width: 100%; height: 100%;}
.main .sec-03 .box .txt li{border: 1px solid #CACACA; box-sizing: border-box; padding: 1.25rem 1.875rem; position: absolute; box-shadow: 1px 1px 10px 0 rgba(0,0,0,0.1);}
.main .sec-03 .box .txt li:nth-child(1){top: 5.3rem; left: 0;}
.main .sec-03 .box .txt li:nth-child(2){top: 0; right: 0;}
.main .sec-03 .box .txt li:nth-child(3){bottom: 0; left: 50%; transform: translateX(-50%);}
.main .sec-03 .box .txt li b{display: block; width: 100%; font-weight: 700; font-size: 1.5em; line-height: 2.18rem; }
.main .sec-03 .box .txt li:nth-child(1) b{color:#1D37FC; }
.main .sec-03 .box .txt li:nth-child(2) b{color:#100E1E; }
.main .sec-03 .box .txt li:nth-child(3) b{color:#7918E8; }
.main .sec-03 .box .txt li p{font-size: 1.125rem; color: #615F5F; line-height: 2.18rem; margin-top: 0.625rem;}

/* 메인 모달용 */
.modal {width: 100%; position: fixed; top: 50%; left: 50%;  max-width: fit-content; display: none;}
.modal a{display: block; width: 100%;}
.modal-action {background: #000; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between}
.modal .chk input + span,
.modal label.chk input + span{font-size: 1.25rem; font-weight: 500; display: flex; align-items: center;color: #AEAEAE;}
.modal label.chk input + span{font-size: 1rem}
.modal-action button {color: #AEAEAE;}
.modal.open {display: block; z-index: 99;}



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

    .main .sec-03 .box .img{width: 26rem; height: auto; top: 14rem}
    .main .sec-03 .box .txt{padding: 1.875rem;}

}

@media all and (max-width: 1200px){
    .main .sec-01 .d-flex .left .txt p{font-size: 1.2rem;}

    .main .sec-02 .d-flex{gap: 0 1.5rem;}


}
@media all and (max-width: 1024px){
    .main .sec-03 .box .txt li{padding: 1.25rem 1.25rem}
    .main .sec-03 .box .txt li:nth-child(1){top: 2.5rem}

    .modal { max-width: 90%; top: 45%;}
}


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

    .modal{max-width: 80%; top: 5rem !important; left: 50% !important; transform: translate(-50%, -5rem) !important;}
    .modal a img{width: 100%;}



    #mainVis{background: url("../images/main/mainVis.jpg")no-repeat center; height: 61.53rem;background-size: cover;}
    #mainVis .inner{padding: 0 1.875rem;}
    #mainVis .top-box .tit{font-size: 3rem;}
    #mainVis .top-box .tit img{width: 24.35rem;}
    #mainVis .top-box .desc{font-size: 1.53rem;}
    #mainVis .top-box .btn-box{display: flex; width: 15.38rem; margin: 4.153rem auto 0 auto; flex-wrap: wrap;}
    #mainVis .top-box .btn-box .btn + .btn{margin-left: 0; margin-top: 0.625rem;}

    #mainVis .bt-box{flex-wrap: wrap; font-size: 1.23rem;}
    #mainVis .bt-box .left,
    #mainVis .bt-box .right{width: 100%;}
    #mainVis .bt-box img{margin-left: 1.15rem; max-width: 8.8rem;}

    .main .sec-01{padding: 3.846rem 0 7.69rem 0;}
    .main .sec-01 .d-flex{flex-wrap: wrap;}
    .main .sec-01 .d-flex .left{width: 100%;}
    .main .sec-01 .d-flex .left strong{font-size: 4.615rem; line-height: 5.38rem;}
    .main .sec-01 .d-flex .left .txt{margin-top: 1.875rem;}
    .main .sec-01 .d-flex .left .txt b{font-size: 1.53rem; line-height: 1.875rem; margin-bottom: 1.5rem;}
    .main .sec-01 .d-flex .left .txt p{font-size: 1.15rem; line-height: 1.375rem;}
    .main .sec-01 .d-flex .right{width: 100%; margin-top: 1.875rem;}
    .main .sec-01 .d-flex .right img{max-width: 90%; box-shadow: 2.7rem 2.7rem 0 #f4f4f4;}


    .main .sec-02{padding: 5.9rem 0 3.846rem 0;}
    .main .sec-02 .sec02-bg{height: 32.38rem; background: url("../images/main/m_sec02_bg.jpg")no-repeat center; background-size: cover;}
    .main .sec-02 .d-flex{flex-wrap: wrap; gap: 2rem 0; margin-top: 5.92rem;}
    .main .sec-02 .d-flex li{width: 100%;}
    .main .sec-02 .d-flex li .txt{margin-top: 1.153rem;}
    .main .sec-02 .d-flex li .txt b::after{font-size: 1.846rem;}
    .main .sec-02 .d-flex li .txt p{font-size: 1.538rem;}

    .main .sec-03{padding: 3.846rem 0;}
    .main .sec-03 .box{height: auto; margin-top: 1.875rem; padding-top: 1.153rem;}
    .main .sec-03 .box .img{position: relative; top: 0; width: 100%;}
    .main .sec-03 .box .txt{position: relative; width: 100%; height: auto; padding: 1.875rem 2rem 2rem 2rem;}
    .main .sec-03 .box .txt li{padding: 1.538rem;}
    .main .sec-03 .box .txt li:nth-child(1),
    .main .sec-03 .box .txt li:nth-child(2),
    .main .sec-03 .box .txt li:nth-child(3){top: unset; left: unset; right: unset; bottom: unset;position: relative;transform:translateX(0);}
    .main .sec-03 .box .txt li + li{margin-top: 0.625rem;}
    .main .sec-03 .box .txt li b{font-size: 1.538rem;}
    .main .sec-03 .box .txt li p{font-size: 1.15rem; line-height: 2rem;}



}