/* ===== FRONT 단의 기본 CSS ===== */


/* ===== SLIDER ===== */
#slider {
    position:relative;
    width: 100vw;
    padding: 43px 0 ;
    overflow: hidden;
}
#slider .main_banner {
    transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out;
    transform: scale(.85); -webkit-transform: scale(.85); -moz-transform: scale(.85); -ms-transform: scale(.85); -o-transform: scale(.85);
    border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px;
    overflow: hidden;
}
#slider .main_banner.swiper-slide-active { transform: scale(1.1) translateZ(0) !important; -webkit-transform: scale(1.1) translateZ(0) !important; -moz-transform: scale(1.1) translateZ(0) !important; -ms-transform: scale(1.1) translateZ(0) !important; -o-transform: scale(1.1) translateZ(0) !important;}
#slider .main_banner picture {
    display: block; width: 100%;
    opacity: 0.8;
}
#slider .main_banner.swiper-slide-active picture {
   margin: auto; opacity: 1;
}

#slider img {
    display: block; width: 100%;
    image-rendering:-webkit-optimize-contrast;
    backface-visibility:hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
}

main { background: #EEF1F9; padding: 30px 0; letter-spacing: -0.04em;}
main .main_wrap {
    display: flex; align-items: stretch; justify-content: space-between; column-gap: 40px;
    width: 800px; margin: 0 auto;
}
main .main_wrap > article {width: calc(50% - 20px);}
.info_wrap > div {
    padding: 18px 26px 38px;
    border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px;
    width: 100%;
    position: relative;
}
.info_wrap .info_box {background: linear-gradient(#2219C0, #221D87);}
.info_wrap .baeum_card {background: linear-gradient(#2AD1FF, #0069CA);}
.info_wrap > div::after {
    content: "";
    width: 110px; height: 116px;
    position: absolute; top: 50%; right: 24px;
    transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%);
}
.info_wrap .info_box::after{ background: url(/img/index/counsel.png) no-repeat center/cover;}
.info_wrap .baeum_card::after{ background: url(/img/index/baeum.svg) no-repeat center/cover;}
.info_wrap > div > h3 {font-size: 23px; line-height: 1.2; color: #fff}
.info_wrap .info_box b {color: #BAB5FF}
.info_wrap .baeum_card b {color: #004E8E}
.info_wrap .info_desc {
    margin-top: 12px;
    font-size: 13px; line-height: 18px; color: rgba(255,255,255,0.6);
}


.main_counsel {
    background: #EAEDF5;
    border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px;
    width: 100%;
    padding: 30px 17px;
}
.main_counsel h3 {
    font-size: 23px; line-height: 1; color: #120047; text-align: center;
    margin-bottom: 30px;
}
.main_counsel h3 > b{
    padding-left: 48px;
    position: relative;
}
.main_counsel h3 > b::before {
    content: url(/img/index/counsel_icon.svg);
    position: absolute; top: 55%; left: 0px;
    transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%);
}

.main_counsel .input_wrap01 {
    display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
    column-gap: 5px; row-gap: 10px;
}
.main_counsel .input_wrap01 > li:nth-child(2) {width: calc(64% - 7px)}

.main_counsel .input_wrap01 input,
.main_counsel .input_wrap01 select {
    width: 100%;
    border: none; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px;
    background-color: #fff;
    font-size: 13px; color: #182E3C; line-height: 18px; font-weight: 500; letter-spacing: -0.04em;
    padding: 11px;
}
.main_counsel .input_wrap01 input::placeholder {color:rgba(24, 46, 60, 0.5);  }
.main_counsel .input_wrap01 select {
    position: relative;
    border: 1px solid #E1E3F3;
    padding: 10px 11px;
    appearance: none;
    cursor: pointer;
}
.main_counsel .input_wrap01 .selectbox {position: relative;}
.main_counsel .input_wrap01 .selectbox::after{
    content: "";
    position: absolute; top: 46%; right: 16px;
    transform: translateY(-50%) rotateZ(45deg); -webkit-transform: translateY(-50%) rotateZ(45deg); -moz-transform: translateY(-50%) rotateZ(45deg); -ms-transform: translateY(-50%) rotateZ(45deg); -o-transform: translateY(-50%) rotateZ(45deg);
    width: 5px; height: 5px;
    border: solid #120047; border-width: 0 2px 2px 0;
}
.main_counsel .consult_info {margin: 20px 0 22px;}
.main_counsel .consult_info > li {font-size: 12px; line-height: 18px; letter-spacing: -0.04em; font-weight: 600; color: #2F3452; word-break: keep-all;}

.form_wrap .check_wrap {
    margin: 22px auto 27px;
    font-size: 13px; line-height: 18px; text-align: center;
}
.form_wrap .check_wrap input[type=checkbox] {display: none;}
.form_wrap .check_wrap input[type=checkbox]+label {
    position: relative;
    padding-left: 31px; margin-right: 3px;
    color: #2F3452; font-weight: 700;
    cursor: pointer;
}
.form_wrap .check_wrap input[type="checkbox"]+label::before {
    content:"";
    display: block;
    position: absolute; top: 50%; left: 0;
    width: 20px; height: 20px;
    transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%);
    border: 1px solid #8E94B9; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px;
    box-shadow: 1px 1px 5px 0 rgba(71, 71, 71, 0.1);
    background-color: rgba(255, 255, 255, 0.8);
}
.form_wrap .check_wrap input[type="checkbox"]:checked+label::before{
    border: 1px solid #5633FE; 
    box-shadow: 1px 1px 5px 0 rgba(71, 71, 71, 0.25);
    background: #5633FE url(/img/check_white.svg) no-repeat center / 80%;;
}
.form_wrap .check_wrap span {color: #2A2A2A; font-weight: 700; cursor: pointer; }

.form_wrap .btn_wrap {text-align: center;}
.form_wrap .primary-button {
    position: relative;
    display: inline-block;
    width: 148px; height: 50px;
    text-align: center; font-size: 20px; color: #fff; font-weight: 700;
    border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border: 1px solid rgba(246, 246, 246, 0.2);
    background: linear-gradient(#0C69E3, #5C2FFF); box-shadow: 1px 1px 5px 0 rgba(71, 71, 71, 0.25);
    cursor: pointer;
    overflow: hidden;
 }
.form_wrap .primary-button:hover {cursor: pointer; border: 1px solid #313131;;}
.primary-button .round {
    border-radius: 50%;
    background-color: #000000;
    position: absolute; top: 5px; left: 10px; z-index: 1;
    animation: scale-down 0.2s forwards; -webkit-animation: scale-down 0.2s forwards;
}
.primary-button.animate .round { animation: scale-up 0.5s forwards; -webkit-animation: scale-up 0.5s forwards;}

@keyframes scale-up {
    to {
        transform: scale(600); -webkit-transform: scale(600); -moz-transform: scale(600); -ms-transform: scale(600); -o-transform: scale(600);
    }
}

@keyframes scale-down {
    from {
        transform: scale(600);
    }
    to {
        ransform: scale(0);
    }
}

.primary-button .btn_txt { 
    position: absolute; top: 50%; left: 50%; z-index: 2;
    transform:translate(-50%,-50%) ; -webkit-transform:translate(-50%,-50%) ; -moz-transform:translate(-50%,-50%) ; -ms-transform:translate(-50%,-50%) ; -o-transform:translate(-50%,-50%) ; 
    font-size: 20px; line-height: 30px; color: #fff; font-weight: 700;
}


@media (max-width: 800px) {
    main {
        background: initial;
        padding: initial;
    }
    main .main_wrap {
        width: auto;
        flex-direction: column;
        row-gap: 10px;
    }
    .main_wrap .info_wrap > div {max-width: 600px; margin: 0 auto;}
    main .main_wrap > article{
        width: auto;
        border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px;
        overflow: hidden;
    }
    .main_wrap .info_wrap {
        padding: 25px 20px 26px;
        background-color: #EEF1F9;
    }
    .main_wrap .main_counsel {margin-bottom: 10px;} 
    .main_counsel .form_wrap {max-width: 600px; margin: 0 auto;} 
}


@media (max-width: 370px) {
   .info_wrap > div {padding: 18px 15px 38px;}
   .info_wrap > div::after {right: 10px; width: 90px;}
}