/* ----------------------- 공통 */
/* 공통들 */
.main_color { color: #0B5ACE; }
.red { color: #E01818; }
.at-container{padding: 0 4.1667vw;}
.flex {display: flex; align-items: normal; justify-content: normal;}
.flex-cc {display: flex; align-items: center; justify-content: normal;}
.flex-c {display: flex; align-items: center; justify-content: center;}
.flex-sp {display: flex; align-items: center; justify-content: space-between;}
.flex-r {display: flex; align-items: center; justify-content: flex-end;}
.flex-a {display: flex; align-items: center; justify-content: space-around;}
.fz9{font-size: 2.0556vw;}
.fz10{font-size: 2.7778vw;}
.fz11{font-size: 3.0556vw;}
.fz12{font-size: 3.3333vw;}
.fz13{font-size: 3.4999vw;}
.fz14{font-size: 3.6889vw;}
.fz14_2{font-size: 15px;}
.fz14RB{font-size: 3.8889vw; color: #000; font-weight: 400;}
.fz16{font-size: 4.0444vw;}
.fz17{font-size: 4.5222vw;}
.fz18{font-size: 5.0000vw;}
.fw3{font-weight: 300;}
.fw4{font-weight: 400;}
.fw5{font-weight: 500;}
.fw6{font-weight: 500;}
.fw7{font-weight: 700;}
.p5{padding: 1.3889vw; box-sizing: border-box;}
.p10{padding: 2.7778vw;box-sizing: border-box;}
.p15{padding: 4.1667vw;box-sizing: border-box;}
.p1015{padding: 2.7778vw 4.1667vw;box-sizing: border-box;}
.pt10 {padding-top: 2.7778vw;}
.pt20 {padding-top: 5.5556vw;}
.pt30 {padding-top: 8.3333vw;}
.pb10 {padding-bottom: 2.7778vw;}
.pb20 {padding-bottom: 5.5556vw;}
.pb30 {padding-bottom: 8.3333vw;}
.ptb15 {padding: 4.1667vw 0;}
.plr15 {padding: 0 4.1667vw; box-sizing: border-box;}
.allm15 {margin: 4.1667vw;}
.mt5 {margin-top: 1.3889vw;}
.mt10 {margin-top: 2.7778vw;}
.mt15 {margin-top: 4.1667vw;}
.mt20 {margin-top: 5.5556vw;}
.mt30 {margin-top: 8.3333vw;}
.mb2 {margin-bottom: 0.4556vw;}
.mb5 {margin-bottom: 0.8889vw;}
.mb7 {margin-bottom: 1.9444vw;}
.mb10 {margin-bottom: 2.7778vw;}
.mb15 {margin-bottom: 4.1667vw;}
.mb20 {margin-bottom: 5.5556vw;}
.mb30 {margin-bottom: 8.3333vw;}
.mb50 {margin-bottom: 13.8889vw;}
.mb100 {margin-bottom: 27.7778vw;}
.mtb15 {margin: 4.1667vw 0;}
.mr5 {margin-right: 1.3889vw;}
.mr8 {margin-right: 2.2222vw;}
.mr10 {margin-right: 2.7778vw;}
.mr15 {margin-right: 4.1667vw;}
.db {display: block;}
.bdc1 {border:0.2778vw solid #C4C4C4;}
.bd5 {border:0.2778vw solid #E4E4E4; border-radius: 1.3889vw;}
.cob {color: #0B5ACE;}
.cof {color: #fff;}
.bgf {background: #fff;}
.bgb{background: #0B5ACE;}
.por{position: absolute; top: 50%;right: 4.1667vw;transform: translateY(-50%);}
.pol{position: absolute; top: 50%;left: 4.1667vw;transform: translateY(-50%);}
.tac {text-align: center;}
.tal {text-align: left;}
.tar {text-align: right;}
.fw300 {font-weight: 300;}
.fw400 {font-weight: 400;}
.fw500 {font-weight: 500;}
.fw600 {font-weight: 600;}
.fw700 {font-weight: 700;}
.fw800 {font-weight: 800;}
.fw900 {font-weight: 900;}
.m0a{display: block;margin: 0 auto;}
.w100{width: 100%;}
.w90{width: 90%;}
.w80{width: 80%;}
.w70{width: 70%;}
.w60{width: 60%;}
.w50{width: 50%;}
.w40{width: 40%;}
.w30{width: 30%;}
.w25{width: 25%;}
.w20{width: 20%;}
.w15{width: 15%;}
.w10{width: 10%;}
.op1{ opacity: 0.1; }
.op2{ opacity: 0.2; }
.op3{ opacity: 0.3; }
.op4{ opacity: 0.4; }
.op5{ opacity: 0.5; }
.op6{ opacity: 0.6; }
.op7{ opacity: 0.7; }
.op8{ opacity: 0.8; }
.op9{ opacity: 0.9; }

.bb1e4 {border-bottom: 0.2778vw solid #e4e4e4;}

.main_color { color: #0b5ace; }
.required { color: #ff4b4b; }

.main-header { width: 100%; position: sticky; }
.main-index { width: 100%; }
.main-index2 { width: 100%; }

a { cursor: default; }

.area { position: relative; }
.area .choose_area { position: absolute; width: 50%; top: 66%; left: 36%; flex-wrap: wrap; gap: 1%; }
.area .choose_area .choose_box { width: calc((100% / 6) - 1%); border-radius: 10px; background: #f7f7f7; padding: 15px; margin-bottom: 1%; cursor: pointer; }
.area .choose_area .choose_box.on { background: #0b5ace; color: #fff; }
.area .choose_area .choose_box .txt { font-size: 0.9vw; font-weight: 500; letter-spacing: -0.32px; }
.area .choose_area .choose_box .img { margin-top: 30%; float: right; width: 50%; }

.pre_area { padding: 44px 0px; text-align: center; }
.pre_area .title { font-size: 22px; font-weight: 800; letter-spacing: -0.44px; color: #9333ea; margin-bottom: 16px }
.pre_area .list-area { width: 60%; margin: auto; }
.pre_area .list-area .question-box { background: #fff; border-radius: 8px; text-align: left; margin-bottom: 16px; }
.pre_area .list-area .question-box .question { padding: 16px 12px; color: #111827; font-size: 17px; letter-spacing: -0.34px; font-weight: 800; border-bottom: 1px solid #ececec; }
.pre_area .list-area .question-box .question .pre_icon { margin-right: 8px; }
.pre_area .list-area .question-box .question .up_btn { display: none; }
.pre_area .list-area .question-box .question .down { display: block; }
.pre_area .list-area .question-box .answer { padding: 10px; display: none; flex-wrap: wrap; gap: 8px; }
.pre_area .list-area .question-box .answer .box { background: #faf5ff; font-size: 15px; padding: 4px 8px; font-weight: 600; border-radius: 8px; margin-bottom: 8px; }

.pre_area .list-area .question-box.on .question { color: #6b12d1; } 
.pre_area .list-area .question-box.on .question .up_btn { display: block; }
.pre_area .list-area .question-box.on .question .down_btn { display: none; }
.pre_area .list-area .question-box.on .answer { display: flex; }

.area1 { background: #0f172a; padding: 100px 450px; align-items: flex-start; }
.area1 .content-area { width: 47%; color: #FFF; }
.area1 .content-area .title { font-size: 35px; line-height: 43.8px; font-weight: 800; margin-bottom: 30px; }
.area1 .content-area .sub-title { font-size: 18px; line-height: 29.6px; font-weight: 300; margin-bottom: 30px; }
.area1 .content-area .box-area { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 15px 24px; margin-top: 24px; }
.area1 .content-area .box-area .image-area { padding: 10px; border-radius: 50%; }
.area1 .content-area .box-area .image-area img { width: 19px; height: 19px; }
.area1 .content-area .box-area .image-area.color1 { background: #9333ea; }
.area1 .content-area .box-area .image-area.color2 { background: #2563eb; }
.area1 .content-area .box-area .image-area.color3 { background: #66d1ff; }
.area1 .content-area .box-area .txt { font-size: 16px; line-height: 24px; font-weight: 800; margin-left: 16px; }
.area1 .info-area { width: 47%; }
.area1 .info-area .box-area { background: #FFF; border-radius: 40px; padding: 32px; }
.area1 .info-area .box-area .title { color: #0f172a; font-size: 23px; line-height: 33px; font-weight: 800; margin-bottom: 32px; }
.area1 .info-area .box-area .sub_title { color: #39414c; font-size: 16px; line-height: 19.5px; font-weight: 900; margin-bottom: 8px; }
.area1 .info-area .box-area .sub_title .pointer { color: #ff3d40; font-size: 11px; }
.area1 .info-area .box-area .frm-input { width: 100%; background: #f8fafc; border: 1px solid #f1f5f9; font-size: 16px; line-height: 19.5px; padding: 14px 17px; font-weight: 600; border-radius: 8px; margin-bottom: 18px; resize: none; }
.area1 .info-area .box-area .frm-label { color: #94a3b8; border: 1px solid #C4C4C4; border-radius: 8px; padding: 12px 14px; font-size: 16px; font-weight: 500; letter-spacing: -0.32px; margin-bottom: 18px; }
.area1 .info-area .box-area input[id="dal"]:checked + label { color: #9333ea; border: 1px solid #dbb2ff; background: #f8f1ff; font-weight: 800; }
.area1 .info-area .box-area input[id="mat"]:checked + label { color: #9333ea; border: 1px solid #dbb2ff; background: #f8f1ff; font-weight: 800; }
.area1 .info-area .box-area select { color: #94a3b8; width: 49%; border: 1px solid #f1f5f9; border-radius: 8px; padding: 13px 17px; margin-bottom: 18px; font-size: 16px; font-weight: 600; }
.area1 .info-area .box-area .agree_label { color: #c4c4c4; font-weight: 600; font-size: 13px; letter-spacing: -0.32px; }
.area1 .info-area .box-area .btn { width: 100%; background: #9333ea; color: #FFF; text-align: center; border-radius: 16px; padding: 18px; font-size: 18px; line-height: 27px; font-weight: 800; margin-top: 18px; margin-bottom: 32px; }
.area1 .info-area .box-area .bottom_txt { color: #9333ea; font-size: 14px; font-weight: 600; line-height: 19.5px; text-align: center; word-break: keep-all; }

footer { color: rgba(51, 51, 51, 0.42); background: #0f172a; padding: 64px 450px; }
footer .a1 { width: 50%; }
footer .a1 .title { font-size: 20px; line-height: 30px; color: #fff; margin-bottom: 16px; font-weight: 800; }
footer .a1 .txt { font-size: 14px; line-height: 21px; color: #fff; }
footer .a1 .txt.gray { color: rgba(255, 255, 255, 0.5); }
footer .a1 .txt.mb { margin-bottom: 8px; }
footer .a2 { width: 50%; text-align: right; }
footer .a2 .txt { font-size: 14px; line-height: 21px; color: #fff; }
footer .a2 .txt.gray { color: rgba(255, 255, 255, 0.5); }
footer .a2 .txt.mb { margin-bottom: 8px; }
footer .copylight { color: rgba(255, 255, 255, 0.5); font-size: 12px; line-height: 18px; text-align: right; margin-top: 24px; }

@media (max-width: 1024px) {
    .area1 { padding: 100px 270px; flex-wrap: wrap; }
    .area1 .content-area { width: 100%; margin-bottom: 50px; }
    .area1 .content-area .title { text-align: center; }
    .area1 .content-area .sub-title { text-align: center; }
    .area1 .info-area { width: 100%; }

    footer { padding: 64px 50px; }
}

@media (max-width: 500px) {
    .mb2 {margin-bottom: 1.3889vw;}
    .mb5 {margin-bottom: 1.5889vw;}

    .pre_area .list-area { width: 95%; }

    .area1 { flex-wrap: wrap; gap: 50px; padding: 96px 20px; }
    .area1 .content-area .title { text-align: left; font-size: 25px; }
    .area1 .content-area .sub-title { text-align: left; size: 16px; }
    .area1 .content-area .box-area .txt { font-size: 14px; }


    footer { padding: 100px 20px; flex-wrap: wrap; }
    footer .a1 { width: 100%; margin-bottom: 30px;  }
    footer .a2 { width: 100%; }
    footer .a2 .txt { font-size: 13px; line-height: 21px; color: #fff; }

}