/* ----------------------- 공통 */
/* 공통들 */
.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: #1e1aed; }
.required { color: #ff4b4b; }
.mobile_hidden { display: none; }

.main-index { width: 100%; }

/* -----공통 헤더 */
.header {text-align: center; position: sticky; top: 0; background-color: #fff; padding: 2vw 4.1667vw; z-index: 999;}
.header .header-logo-box { cursor: pointer; }
.header .header-menu { width: 65%; }
.header .header-item { font-size: 14pt; color: #0f1729; cursor: pointer; padding: 0px 16px; }
.header .header-item.on { color: #3c83f6; }
.header .header-item-btn { font-size: 14pt; color: #fff; background: #62cbf2; border-radius: 10px; padding: 13px 16px; cursor: pointer; }

.consulting-area { padding: 84px 260px; background: linear-gradient(90deg,rgba(60, 131, 246, 1) 0%, rgba(11, 100, 244, 1) 50%, rgba(15, 23, 41, 1) 100%); }
.consulting-area .tel { background: rgba(255,255,255, 0.2); color: #fff; border-radius: 99px; font-size: 19px; font-weight: 800; line-height: 20px; text-align: center; padding: 12px 20px; }
.consulting-area .tel-area { margin-top: 36px; margin-bottom: 24px; }
.consulting-area .tel-area .tel-box { width: 24%; background: #fff; box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1); border-radius: 12px; padding: 24px; text-align: left; }
.consulting-area .tel-area .tel-box .caption { font-size: 14px; line-height: 20px; color: #65758b; font-weight: 400; margin-bottom: 12px; }
.consulting-area .tel-area .tel-box .name { font-size: 18px; line-height: 28px; color: #0f1729; font-weight: 800; margin-bottom: 12px; }
.consulting-area .tel-area .tel-box .tel-btn { width: 48%; font-size: 14px; line-height: 20px; text-align: center; border: 1px solid #e1e7ef; border-radius: 10px; padding: 5px 0; font-weight: 600; }
.consulting-area .tel-area .tel-box .kakao-btn { width: 48%; font-size: 14px; line-height: 20px; text-align: center; background: #62cbf2; color: #fff; border-radius: 10px; padding: 5px 0; font-weight: 600; }
.consulting-area .recru-box { background: rgba(255, 255, 255, 0.2); width: 100%; padding: 12px; text-align: center; border-radius: 8px; margin-bottom: 84px; }
.consulting-area .recru-box .txt1 { font-size: 32px; font-weight: 900; line-height: 61px; color: #fff; }
.consulting-area .recru-box .txt2 { font-size: 23px; font-weight: 600; line-height: 44px; color: #fff; }
.consulting-area .info-area .txt1 { font-size: 30px; font-weight: 800; line-height: 36px; letter-spacing: -1.2px; color: #fff; }
.consulting-area .info-area .txt2 { font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -0.8px; color: #fff; }
.consulting-area .info-area .txt3 { font-size: 50px; font-weight: 900; letter-spacing: -2px; color: #fff; }
.consulting-area .info-area .info-box { background: #fff; border-radius: 8px; padding: 35px 30px; margin: 24px auto; width: 40%; }
.consulting-area .info-area .info-box .title { font-size: 20px; line-height: 43px; letter-spacing: -0.8px; font-weight: 600; color: #161616; margin-bottom: 15px; }
.consulting-area .info-area .info-box .input-field { width: 100%; border: 1px solid #c4c4c4; border-radius: 8px; padding: 12px 14px; font-size: 16px; letter-spacing: -0.32px; font-weight: 500; margin-bottom: 15px; }
.consulting-area .info-area .info-box .input-field::placeholder { color: #c4c4c4; }
.consulting-area .info-area .info-box .gender-field { margin-bottom: 15px; }
.consulting-area .info-area .info-box .frm-input { color: rgba(51, 51, 51, 0.2); border: 1px solid #C4C4C4; border-radius: 8px; padding: 12px 14px; cursor: pointer; resize: none; font-size: 16px; font-weight: 600; letter-spacing: -0.32px; }
.consulting-area .info-area .info-box input[id="male"]:checked + label { color: #0c5ee2; border: 1px solid #0c5ee2; background: rgba(12, 94, 226, 0.09); }
.consulting-area .info-area .info-box input[id="female"]:checked + label { color: #0c5ee2; border: 1px solid #0c5ee2; }
.consulting-area .info-area .info-box .btn { width: 100%; background: #0c5ee2; border-radius: 40px; text-align: center; color: #fff; font-size: 17px; font-weight: 500; padding: 17px 0px; }


.list-area { width: 48%; margin: auto; padding: 80px 0px; }
.list-area .question-box { text-align: left; margin-bottom: 16px; }
.list-area .question-box .question { padding: 16px 24px; color: #111827; font-size: 16px; font-weight: 600; border-bottom: 1px solid #e1e7ef; }
.list-area .question-box .question .icon { background: rgba(212, 173, 46, 0.1); border-radius: 12px; padding: 15px; }
.list-area .question-box .question .title { width: 100%; margin-left: 16px; }
.list-area .question-box .question .up_btn { display: none; }
.list-area .question-box .question .down_btn { display: block; }
.list-area .question-box .answer { display: none; }
.list-area .question-box .answer .box { background: #f9f9f9; padding: 30px; color: #0f1729; font-size: 16px; line-height: 28px; font-weight: 600; }
.list-area .question-box.on .question .up_btn { display: block; }
.list-area .question-box.on .question .down_btn { display: none; }
.list-area .question-box.on .answer { display: block; }


.footer-area { background: #0f1729; color: #fff; padding: 32px; }
.footer-area .footer-title { font-size: 18pt; margin-bottom: 8px; }
.footer-area .footer-subtitle { font-size: 14pt; }


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

    .consulting-area { padding: 84px 40px; }
    .consulting-area .tel-area { flex-wrap: wrap; padding: 0px 132px; }
    .consulting-area .tel-area .tel-box { width: 49%; margin-bottom: 2%; }
    .consulting-area .info-area .info-box { width: 60%; }

    .list-area { width: 85%; }
}


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

    .mobile_hidden { display: block; }

    .header { flex-wrap: wrap; padding: 4.1667vw;  }
    .header .header-logo-box { width: 100%; text-align: center; }
    .header .header-logo { width: 40%; }
    .header .header-menu { width: 100%; }
    .header .header-item { font-size: 15px; font-weight: 600; margin-top: 5vw; padding: 0px 10px; }
    .header .header-item-btn { display: none; }

    .consulting-area { padding: 84px 20px; }
    .consulting-area .tel-area { padding: 0px; }
    .consulting-area .tel-area .tel-box { padding: 12px; text-align: center; }
    .consulting-area .tel-area .tel-box .btn-area { flex-wrap: wrap; }
    .consulting-area .tel-area .tel-box .tel-btn { width: 100%; margin-bottom: 5px; }
    .consulting-area .tel-area .tel-box .kakao-btn { width: 100%; }

    .consulting-area .recru-box .txt1 { font-size: 24px; line-height: 51px; }
    .consulting-area .recru-box .txt2 { font-size: 18px; line-height: 34px; }
    .consulting-area .info-area .txt1 { font-size: 30px; line-height: 36px; letter-spacing: -1.2px; }
    .consulting-area .info-area .txt2 { font-size: 20px; line-height: 28px; letter-spacing: -0.8px; }
    .consulting-area .info-area .txt3 { font-size: 50px; line-height: 59px; letter-spacing: -2px; }
    .consulting-area .info-area .info-box { width: 100%; }

    .list-area { width: 95%; }
    .list-area .question-box .question { padding: 16px 0px; }
}