/* ----------------------- 공통 */
/* 공통들 */
.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; }

.main-index { width: 100%; }

.hidden { display: none; }

/* -----공통 헤더 */
.header {text-align: center; position: sticky; top: 0; background-color: #fff; padding: 12px 4.1667vw; z-index: 999;}
.header .header-logo-box { cursor: pointer; }
.header .header-menu { justify-content: end; gap: 10px; }
.header .header-item { font-size: 1vw; color: #333333; cursor: pointer; padding: 8px; font-size: 16px; }
.header .header-item.menu1 { color: #2463eb; border: 1px solid #2463eb; border-radius: 6px; }
.header .header-item.menu2 { color: #fff; background: #2463eb; border-radius: 6px; }
.header .header-item.menu3 { background: #ffd51a; border-radius: 6px; }

.cont1 { position: relative; padding: 200px 0; background: linear-gradient(150deg,rgba(36, 99, 235, 1) 0%, rgba(13, 162, 231, 1) 100%); }
.cont1 .banner_img1 { position: absolute; top: 80px; right: 40px; }
.cont1 .banner_img2 { position: absolute; bottom: 80px; left: 40px; }
.cont1 .txt { color: #fff; padding: 115px 0px; text-align: center; }
.cont1 .txt .txt1 { font-size: 68px; }
.cont1 .txt .txt2 { font-size: 68px; }
.cont1 .txt .txt3 { font-size: 24px; color: #ddfedb; }
.cont1 .txt .txt4 { font-size: 24px; }
.cont1 .txt .txt5 { font-size: 16px; color: rgba(255, 255, 255, 0.8); }
.cont1 .txt .txt5 .separator::after { content: "  |  "; color: rgba(255, 255, 255, 0.8); }

.cont2 { padding: 80px 240px; text-align: center; }
.cont2 .txt1 { color: #111827; font-size: 36px; margin-bottom: 10px; }
.cont2 .txt2 { color: #3e5675; font-size: 18px; margin-bottom: 45px; }
.cont2 .box-area { gap: 32px; justify-content: center; }
.cont2 .box { padding: 30px; border-radius: 8px; width: 35%; }
.cont2 .box.box1 { border: 2px solid #fee2e2; }
.cont2 .box.box1 .circle { background: #fee2e2; width: 50px; height: 50px; border-radius: 50%; position: relative; margin: auto; margin-bottom: 10px; }
.cont2 .box.box1 .circle img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.cont2 .box .txt3 { font-size: 24px; color: #111827; margin-bottom: 20px; }
.cont2 .box .content { margin-bottom: 16px; gap: 12px; }
.cont2 .box .content .img1 { width: 20px; height: 20px; }
.cont2 .box .content .txt4 { font-size: 16px; color: #111827; margin-bottom: 4px; }
.cont2 .box .content .txt5 { font-size: 14px; color: #3e5675; }
.cont2 .box.box2 { border: 2px solid #ffedd5; }
.cont2 .box.box2 .circle { background: #ffedd5; width: 50px; height: 50px; border-radius: 50%; position: relative; margin: auto; margin-bottom: 10px; }
.cont2 .box.box2 .circle img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.cont3 { background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(239, 249, 255, 1) 100%); padding: 0px 11%; }
.cont3 .area1 { gap: 20px; justify-content: center; margin-bottom: 80px; }
.cont3 .area1 .circle { background: #007aff; color: #fff; border-radius: 50%; width: 340px; height: 340px; position: relative; }
.cont3 .area1 .circle .content { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; }
.cont3 .area1 .circle .txt1 { font-size: 27px; }

.cont3 .area2 img { width: 100%; }

.cont3 .area3 { padding: 60px; }
.cont3 .area3 .txt1 { font-size: 24px; color: #333; margin-bottom: 20px; }
.cont3 .area3 .txt2 { font-size: 47px; color: #333; margin-bottom: 20px; }
.cont3 .area3 .txt2 .cor { color: #ff8074; }
.cont3 .area3 .txt3 { font-size: 16px; color: #333; }

.cont3 .area4  { gap: 32px; justify-content: center; }
.cont3 .area4 .box { padding: 30px; border-radius: 8px; width: 35%; border: 2px solid #aed5ff; background: #FFF; }
.cont3 .area4 .box .txt1 { font-size: 24px; color: #111827; margin-top: 20px; }
.cont3 .area4 .box .txt2 { font-size: 16px; color: #3e5675; margin-bottom: 20px; }
.cont3 .area4 .box .content { margin-bottom: 16px; gap: 12px; }
.cont3 .area4 .box .content .img1 { width: 20px; height: 20px; }
.cont3 .area4 .box .content .txt4 { font-size: 16px; color: #111827; margin-bottom: 4px; }
.cont3 .area4 .box .content .txt5 { font-size: 14px; color: #3e5675; }

.cont3 .area5 { padding: 80px 0px; }
.cont3 .area5 .txt1 { font-size: 20px; color: #111827; text-align: center; font-weight: 700; }
.cont3 .area5 .box-area { margin: 20px 0px; padding: 50px 30px; background: #fff; border-radius: 10px; }
.cont3 .area5 .box-area .content { align-items: center; justify-content: center; }
.cont3 .area5 .box-area .content .img1 { margin-right: 10px; }
.cont3 .area5 .box-area .content .txt2 { font-size: 26px; color: #111827; }
.cont3 .area5 .box-area .content .txt3 { font-size: 16px; color: #2463eb; }
.cont3 .area5 .box-area .content .txt4 { font-size: 19px; color: #3e5675; margin-left: 42px; }

.cont3 .area5 .content2 { flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cont3 .area5 .content2 .box { background: #FFF; border-radius: 8px; padding: 24px; width: 32.7%; }
.cont3 .area5 .content2 .box .first { gap: 15px; align-items: center; margin-bottom: 5px; }
.cont3 .area5 .content2 .box .first .number { background: #2463eb; color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 18px; font-weight: 600; position: relative; }
.cont3 .area5 .content2 .box .first .number span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.cont3 .area5 .content2 .box .first .img1 { width: 24px; height: 24px; }
.cont3 .area5 .content2 .box .first .txt1 { font-size: 18px; color: #111827; }
.cont3 .area5 .content2 .box .first .txt { font-size: 20px; color: #111827; text-align: left; font-weight: 700; }

.cont3 .area5 .content2 .box .line { border: 1px solid #2463eb; width: 24px; opacity: 0.3; margin-left: 48px; }
.cont3 .area5 .content2 .box .txt2 { color: #294f00; font-size: 14px; margin-left: 48px; text-align: left; margin-top: 5px; }

.cont4 { background: #f9fafb; padding: 80px 0px; }
.cont4 .txt1 { font-size: 36px; color: #111827; margin-top: 20px; margin-bottom: 64px; }
.cont4 .list-area { width: 42%; margin: auto; }
.cont4 .list-area .question-box { background: #fff; border-radius: 8px; text-align: left; margin-bottom: 16px; box-shadow: 0px 4px 6px -1px rgba(17, 24, 39, 0.1); }
.cont4 .list-area .question-box .question { padding: 16px 24px; color: #111827; font-size: 16px; font-weight: 600; }
.cont4 .list-area .question-box .question .up_btn { display: none; }
.cont4 .list-area .question-box .question .down_btn { display: block; }
.cont4 .list-area .question-box .answer { padding: 10px; display: none; }
.cont4 .list-area .question-box .answer .box { background: #f8f8f8; padding: 20px; color: #111827; opacity: 0.8; font-size: 15px; border-radius: 10px; }

.cont4 .list-area .question-box.on .question .up_btn { display: block; }
.cont4 .list-area .question-box.on .question .down_btn { display: none; }
.cont4 .list-area .question-box.on .answer { display: block; }

.cont5 button { width: 33.33%; text-align: center; font-size: 14px; padding: 18px; }
.cont5 .btn1 { color: #2463eb; border: 1px solid #2463eb; }
.cont5 .btn2 { color: #fff; background: #2463eb; }
.cont5 .btn3 { color: #333333; background: #ffd51a; }

.footer { background: #111827; padding: 64px 260px; }
.footer .txt1 { color: #dbeafe; font-size: 16px; margin: 16px 0px; opacity: 0.4; }
.footer .txt2 { color: #bfdbfe; font-size: 14px; gap: 16px; opacity: 0.4; }
.footer .txt3 { color: #dbeafe; font-size: 12px; margin: 16px 0px; opacity: 0.4; }

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

    .hidden { display: block; }
    .non_hidden { display: none; }

    .header { flex-wrap: wrap; padding: 4.1667vw;  }
    .header .header-logo-box { width: 100%; text-align: center; }
    .header .header-logo { width: 55%; }
    .header .header-menu { display: none; }

    .cont1 { padding: 100px 0px; }
    .cont1 .txt { padding: 0px; }
    .cont1 .txt .txt1 { font-size: 44px; }
    .cont1 .txt .txt2 { font-size: 44px; margin-bottom: 24px; }
    .cont1 .txt .txt3 { font-size: 18px; }
    .cont1 .txt .txt4 { font-size: 18px; margin-bottom: 24px; }
    .cont1 .txt .txt5 .separator::after { content: ""; color: rgba(255, 255, 255, 0.8); }

    .cont1 .banner_img1 { width: 35%; top: 20px; right: 0px; }
    .cont1 .banner_img2 { width: 45%; bottom: 20px; left: 0px; }

    .cont2 { padding: 80px 20px; }
    .cont2 .txt1 { font-size: 24px; margin-bottom: 16px; }
    .cont2 .txt2 { font-size: 15px; }
    .cont2 .box-area { flex-wrap: wrap; gap: 10px; }
    .cont2 .box { width: 100%; }

    .cont3 { padding: 0px 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(239, 249, 255, 1) 30%); }
    .cont3 .area1 { flex-wrap: wrap; gap: 10px; }
    .cont3 .area2 img { width: 100%; }
    .cont3 .area3 { padding: 60px 16px; }
    .cont3 .area3 .txt1 { font-size: 20px; }
    .cont3 .area3 .txt2 { font-size: 39px; }
    .cont3 .area3 .txt3 { font-size: 12px; }
    .cont3 .area4 { flex-wrap: wrap; gap: 10px; }
    .cont3 .area4 .box { width: 100%; }
    .cont3 .area5 .box-area .content { flex-wrap: wrap; }
    .cont3 .area5 .box-area .content .txt2 { font-size: 22px; }
    .cont3 .area5 .box-area .content .txt3 { font-size: 12px; }
    .cont3 .area5 .box-area .content .txt4 { width: 100%; margin-top: 42px; margin-left: 0px; font-size: 15px; }
    .cont3 .area5 .content2 .box { width: 100%; }
    .cont3 .area5 .content2 .box .first { flex-wrap: wrap; }
    .cont3 .area5 .content2 .box .first .number { width: 30px; height: 30px; margin-right: calc(100% - 30px); }
    .cont3 .area5 .content2 .box .line { margin-left: 0px; }
    .cont3 .area5 .content2 .box .txt2 { margin-left: 0px; }

    .cont4 { padding: 80px 20px; }
    .cont4 .img { width: 10%; }
    .cont4 .txt1 { font-size: 24px; }
    .cont4 .list-area { width: 100%; }

    .footer { padding: 64px 20px; }
}