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

/* -----공통 헤더 */
.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-item { font-size: 1vw; color: #333333; opacity: 0.5; cursor: pointer; }
.header .header-item.on { color: #1e1aed; opacity: 1; }

.sub_title { font-size: 0.8vw;}
.title { font-size: 2.6vw; }

.second { background: #f9f9f9; padding: 2vw 4.5vw; align-items: flex-start; }
.second .title-area { width: 18%; font-size: 2.4vw; }
.second .content-area { width: 81%; flex-wrap: wrap; gap: 0.7vw; }
.second .content-area .content-box { width: 19%; height: 300px; background: #fff; padding: 0.6vw 0.7vw; border-top-left-radius: 9px; border-top-right-radius: 40px; border-bottom-left-radius: 40px; border-bottom-right-radius: 9px; }
.second .content-area .content-box .numbering { font-size: 0.7vw; }
.second .content-area .content-box .content-title { font-size: 1.2vw; }
.second .content-area .content-box .content-sub-title { font-size: 0.8vw; color: #69baf8; }
.second .content-area .content-box .content-ul { color: #898989; padding-left: 1vw; }
.second .content-area .content-box .content-ul li { list-style: disc; }

.third { padding: 2vw 4.5vw; align-items: flex-start; }
.third .title-area { width: 14%; font-size: 1.8vw; }
.third .title-area span { font-size: 1.1vw; }
.third .content-area { width: 85%; padding: 1.1vw 1.2vw; border: 1px solid #ededed; border-radius: 25px; box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.06); }
.third .content-area .desc { font-size: 0.7vw; }
.third .content-area .sub-title { font-size: 0.7vw; opacity: 0.3; }
.third .content-area .title { font-size: 1vw; color: #333333; font-weight: 700; }
.third .content-area .input_box { border-bottom: 1px solid #e6e6e6; padding: 0.3vw; }
.third .content-area .input_box input,select { border: 0px; padding: 0.5vw;}
.third .content-area .name-field { width: 32.5%; }
.third .content-area .phone-field { width: 32.5%; }
.third .content-area .email-field { width: 32.5%; }
.third .content-area .company-name-field { width: 49.5%; }
.third .content-area .site-field { width: 49.5%; }
.third .content-area .project-item { color: #898989; padding: 0.5vw 0vw; width: 7vw; border: 1px solid #c6c6c6; border-radius: 4px; text-align: center; margin-right: 0.5vw; cursor: pointer; }
.third .content-area .project-item.on { color: #1e1aed; background: #f3f6ff; border: 1px solid #1e1aed; }
.third .content-area .price-field { width: 30%; }
.third .content-area .site1-field { width: 49.5%; }
.third .content-area .site2-field { width: 49.5%; }
.third .content-area .note-field { width: 100%; height: 100px; border: 1px solid #c6c6c6; border-radius: 4px; resize: none; }

.terms-field { align-items: center; gap: 0.5vw; }
.terms-field .term_btn { color: #898989; border: 1px solid #c6c6c6; border-radius: 8px; padding: 0.3vw 0.8vw; }

.send_btn { color: #fff; background: #1e1aed; border-radius: 39px; padding: 0.5vw 1vw; font-size: 0.8vw; font-weight: 600; }

.main2 .second .title-area { width: 26%; font-size: 2vw; }
.main2 .second .content-area { width: 62%; flex-wrap: wrap; gap: 0.6vw; }
.main2 .second .content-area .content-circle-box { width: 10.6vw; height: 10.6vw; background: rgba(255, 255, 255, 0.66); border-radius: 50%; font-size: 1.1vw; display: flex; flex-wrap: wrap; align-items: center;}
.main2 .second .content-area .content-circle-box p { width: 100%; }

.main3 .second { flex-wrap: wrap; text-align: center; gap: 3vw; }
.main3 .second .title-area { width: 100%; font-size: 2vw; }
.main3 .second .content-area { width: 100%; flex-wrap: wrap; gap: 0.7vw; justify-content: center; }
.main3 .second .content-area .content-box2 { width: 15vw; height: 15vw; border: 1px solid #000; background: #fff; padding: 2vw 1vw; }

.main3 .third .content-area .company-name-field{ width: 60%; }
.main3 .third .content-area .name-field { width: 60%; }
.main3 .third .content-area .phone-field { width: 60%; }
.main3 .third .content-area .price-field { width: 30%; }
.main3 .third .content-area .traffic-field { width: 30%; }

.main4 .sub_title { font-size: 1.5vw; color: #000; font-weight: 900; }
.main4 .third { padding: 2vw 12.5vw; align-items: flex-start; }
.main4 .third .title-area { width: 25%; font-size: 1.2vw; }
.main4 .third .content-area2 { width: 73%; }

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

    .header { flex-wrap: wrap; padding: 4.1667vw;  }
    .header .header-logo-box { width: 100%; text-align: center; }
    .header .header-logo { width: 55%; }
    .header .header-menu { width: 100%; }
    .header .header-item { font-size: 3.4999vw; font-weight: 500; margin-top: 5vw;  }
    
    .sub_title { font-size: 3.8999vw; }
    .title { font-size: 4.8444vw; }
    .sub-desc { font-size: 3.8999vw; padding: 0vw 8vw; }

    .first { padding: 10vw 0vw; }

    .second { flex-wrap: wrap; padding: 10vw 4.5vw; }
    .second .title-area { width: 100%; text-align: center; font-size: 5vw; margin-bottom: 5vw; }
    .second .content-area { width: 100%; gap: 1.8vw; }
    .second .content-area .content-box { width: 49%; padding: 3.1vw 3.2vw; }
    .second .content-area .content-box .numbering { font-size: 3.2333vw; }
    .second .content-area .content-box .content-title { font-size: 4.1vw; }
    .second .content-area .content-box .content-sub-title { font-size: 3.2333vw; color: #69baf8; }
    .second .content-area .content-box .content-ul { padding-left: 3.7vw; font-size: 3.0vw; }

    .third { flex-wrap: wrap; padding: 10vw 4.5vw; }
    .third .title-area { width: 100%; text-align: center; font-size: 5vw; margin-bottom: 5vw; }
    .third .title-area span { font-size: 4.5vw; }
    .third .content-area { width: 100%; padding: 3.1vw 3.2vw; }
    .third .content-area .desc { font-size: 3.3vw; }
    .third .content-area .sub-title { font-size: 3.3vw; opacity: 0.3; padding-top: 5vw; }
    .third .content-area .title { font-size: 4.4vw; color: #333333; font-weight: 700; }
    .third .content-area .mo-required { font-size: 3.3vw; }
    .third .content-area .input_box { border-bottom: 1px solid #e6e6e6; padding: 3vw; }
    .third .content-area .input_box input,select { border: 0px; padding: 3vw;}
    .third .content-area .name-field { width: 100%; }
    .third .content-area .phone-field { width: 100%; }
    .third .content-area .email-field { width: 100%; }
    .third .content-area .company-name-field { width: 100%; }
    .third .content-area .site-field { width: 100%; }
    .third .content-area .project-field { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6vw; }
    .third .content-area .project-item { padding: 2.5vw 0vw; width: 49%; font-size: 3.3333vw; }
    .third .content-area .project-item.on { color: #1e1aed; background: #f3f6ff; border: 1px solid #1e1aed; }
    .third .content-area .price-field { width: 100%; }
    .third .content-area .sub-site-field { flex-wrap: wrap; }
    .third .content-area .site1-field { width: 100%; }
    .third .content-area .site2-field { width: 100%; }

    .terms-field { align-items: center; gap: 1vw; font-size: 3.333vw; padding-top: 5vw; }
    .terms-field .term_btn { color: #898989; border: 1px solid #c6c6c6; border-radius: 8px; padding: 2.3vw 2.8vw; }

    .send-field { width: 100%; text-align: center; padding-top: 5vw; }
    .send_btn { color: #fff; background: #1e1aed; border-radius: 39px; padding: 2.5vw 8vw; font-size: 3.8vw; font-weight: 600; }

    .copylight { font-size: 3.3333vw; }

    .main2 .second .title-area { width: 100%; font-size: 5vw; }
    .main2 .second .content-area { width: 100%; flex-wrap: wrap; justify-content: center; gap: 5vw; }
    .main2 .second .content-area .content-circle-box { width: 43vw; height: 43vw; font-size: 4.1vw; }

    .main3 .second .title-area { width: 100%; font-size: 5vw; }
    .main3 .second .content-area { width: 100%; flex-wrap: wrap; gap: 2vw; justify-content: center; }
    .main3 .second .content-area .content-box2 { width: 80vw; height: 60vw; border: 1px solid #000; background: #fff; padding: 6vw 10vw; font-size: 3.8vw; }

    .main3 .third .content-area .company-name-field{ width: 100%; }
    .main3 .third .content-area .name-field { width: 100%; }
    .main3 .third .content-area .phone-field { width: 100%; }
    .main3 .third .content-area .price-field { width: 100%; }
    .main3 .third .content-area .traffic-field { width: 100%; }

    .main3 .ad_img { content: url(../img/ad_img_mo.png); }


    .main4 .sub_title { font-size: 5vw; }
    .main4 .third { padding: 2vw 4.5vw; flex-wrap: wrap; }
    .main4 .third .title-area { width: 100%; text-align: left; font-size: 4vw; }
    .main4 .third .content-area2 { width: 100%; margin-bottom: 5vw; }
}