@charset "UTF-8";
  /* 메인_탑 */
  .main_top_wrap { background: url(/common/front/kor/images/main_new/img_main_bg01.png) no-repeat center / 100% 100%;}
  .main_top_box { display: flex; position: relative; height: 500px; }
  .main_top_box > ul { display: flex; flex-direction: column; position: absolute; }
  .main_top_box > ul > li { width: 250px; height: 250px; color: #fff; box-sizing: border-box; }
  .main_top_box > ul > li > a { color: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; position: relative; font-size: 24px; font-weight: bold; width: 100%; height: 100%; padding: 25px; box-sizing: border-box; }
  .main_top_box > ul > li > a > i { display: flex; align-items: center; justify-content: center; border-radius: 100%; box-sizing: border-box; width: 50px; height: 50px; }
  .main_top_box > ul > li:hover i  { transition: all 0.5s; background-color: #fff; }
  .main_top_box > ul > li:hover i img { transition: all 0.5s; filter: invert(1); }

  .main_top_list01 { left: 0; }
  .main_top_list01 > li:first-of-type { background-color: #229fff; }
  .main_top_list01 > li:last-of-type { background-color: #125dab; }
  .main_top_list01 i { position: absolute; top: 25px; right: 25px; background-color: rgba(255, 255, 255, 0.15); }

  .main_top_list02 { right: 0; }
  .main_top_list02 > li { background-color: rgba(0, 0, 0, 0.5); }
  .main_top_list02 > li:first-of-type { border-bottom: 1px solid #807c77; }
  .main_top_list02 i { background-color: rgba(0, 0, 0, 0.35); border: 1px solid #888f96; }

  .main_top_tit { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 70px; padding: 0 270px; box-sizing: border-box; }
  .main_top_tit > h3 { font-size: 60px; color: #fff; letter-spacing: -0.5px; line-height: 1; text-align: center; word-break: keep-all; }
  .main_search_box { display: flex; width: 520px; height: 65px; background-color: #fff; box-sizing: border-box; }
  .main_search_box > label { display: flex; align-items: center; padding-left: 30px; width: 100%; box-sizing: border-box; }
  .main_search_box > label > span { line-height: 1; font-size: 18px; font-weight: bold; border-right: 1px solid #ccc; padding: 0 20px; box-sizing: border-box; }
  .main_search_box > label > input { border: none; border-radius: 0; height: 100%; padding: 0 20px; flex: 1;  }

  .main_search_box button { background-color: #229fff; color: #fff; min-width: 110px; font-size: 18px; font-weight: bold; box-sizing: border-box; outline: none; border: none; }

  /* 메인_미드 */
  .main_mid_wrap { background-color: #f1f4f7; padding: 70px 0; box-sizing: border-box; }
  .main_mid_box { display: flex; flex-direction: column; gap: 70px; }
  .main_mid_list { display: flex; gap: 45px; width: 100%; padding: 0 60px; box-sizing: border-box;  }
  .main_mid_list > li { flex: 1; }
  .main_mid_list > li > a { display: flex; gap: 20px; align-items: start; }
  .main_mid_list > li > a > i { display: flex; align-items: center; justify-content: center; background-color: #fff; min-width: 80px; height: 80px; box-shadow: 0px 0px 15px 5px rgba(135,138,142,0.15); border: 1px solid #fff; box-sizing: border-box; }
  .main_mid_list > li > a:hover i { transition: all 0.5s; border-color: #2d435b; }
  .main_mid_list > li > a:hover span { transition: all 0.5s; color: #000; }
  .mid_list_txt { display: flex; flex-direction: column; gap: 5px; line-height: 1.3; letter-spacing: -0.75px; padding-top: 5px; box-sizing: border-box; }
  .mid_list_txt > p { color: #000; font-size: 18px; font-weight: bold; }
  .mid_list_txt > span { font-size: 14px; color: #999; word-break: keep-all; }

  .main_mid_detail { display: flex; gap: 20px; height: 380px; }
  .main_mid_detail > div { background-color: #fff; padding: 50px; box-sizing: border-box; display: flex; flex-direction: column; }
  .mid_detail_top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
  .mid_detail_top > p { font-size: 24px; line-height: 1; font-weight: bold; letter-spacing: -0.5px; }
  .main_notice_box { width: 600px; }
  .main_notice_list > li { box-sizing: border-box; border-bottom: 1px solid #f0f0f0; }
  .main_notice_list > li:last-of-type { border-bottom: 0; }
  .main_notice_list > li:last-of-type a { padding-bottom: 0; }
  .main_notice_list > li:hover { transition: all 0.5s; border-color: #2d435b; }
  .main_notice_list > li > a { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-weight: 500; line-height: 20px; padding: 15px 0; box-sizing: border-box; }
  .main_notice_list > li > a > p { font-size: 18px; color: #000; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; letter-spacing: -0.5px; box-sizing: border-box; }
  .main_notice_list > li > a > .noti { font-weight: bold; padding-right: 20px; }
  .main_notice_list > li > a > .noti::before { position: absolute; content: 'N'; width: 20px; height: 20px; color: #fff; font-weight: bold; line-height: 1; font-size: 12px; background-color: #ff7f21; top: 0; right: 0; display: flex; align-items: center; justify-content: center; }
  .main_notice_list > li > a > span { font-size: 16px; color: #999; min-width: 100px; text-align: right; }

  .main_slider_box { flex: 1; overflow: hidden; }
  .main_slider {width: 100%;padding-top: 15px;height: 100%;box-sizing: border-box;}
  .main_slider a {display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;position: relative;background: #ececec;box-sizing: border-box;}
  .main_slider a p { position: absolute; color: #fff; font-size: 18px; font-weight: bold; letter-spacing: -0.5px; bottom: 30px; left: 50%; transform: translate(-50%,50%); width: 100%; padding: 0 30px; box-sizing: border-box; text-align: center; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
  .main_slider a img {max-width: 100%;height: 100%;width: 100%;object-fit: scale-down;}
  .main_slider a::before { position: absolute; display: block; content: ''; width: 100%; height: 100%; background-color: #000; opacity: 0.5; bottom: 0; left: 0; }
  .main_slider .swiper-slide-active a::before { position: absolute; display: block; content: ''; width: 100%; height: 60%; background: linear-gradient(to top,rgba(18, 93, 171, 1) 0%, rgba(141, 172, 203, 1) 50%, rgba(141, 172, 203, 0) 100%); }
  .main_slider_bar { width: 100%; position: relative; margin-top: 15px; }
  .main_slider_bar .swiper-pagination {  width: 100%; top: auto; height: 6px; box-sizing: border-box; background-color: #d9d9d9; }
  .main_slider_bar .swiper-pagination-progressbar-fill { box-sizing: border-box; background-color: #125dab; }

  /* 메인_바텀 */
  .main_btm_wrap { position: relative; }
  /* 카카오맵 퍼가기 지도: 하단 영역 전체에 깔고, 파란 패널(.main_btm_cntbox)은 그 위에 겹친다 */
  .main_btm_map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: #e8ecef url(/common/front/kor/images/main_new/img_main_bg_map.png) no-repeat center center / cover; }
  .main_btm_map .root_daum_roughmap { position: absolute; top: 0; left: 0; }
  .main_btm_map .map_border, .main_btm_map .wrap_controllers { display: none; }
  /* 확대/축소 버튼과 카카오 로고·축척은 오른쪽(패널 아래)이 아니라 왼쪽으로 옮긴다 */
  .main_btm_map .wrap_btn_zoom { right: auto !important; left: 8px; }
  .main_btm_map .map > div:nth-child(2) { right: auto !important; left: 0; }
  .main_btm_box { display: flex; height: 400px; position: relative; z-index: 1; pointer-events: none; }

  .main_btm_cntbox {  }
  .main_btm_cntbox > div {width: 400px;padding: 38px 40px;box-sizing: border-box;color: #fff;height: 100%;pointer-events: auto;}

  .main_btm_left { background-color: #2d435b; display: flex; flex-direction: column; gap: 10px; justify-content: center; position: absolute; left: 0; }
  .main_btm_left > p { font-size: 24px; font-weight: bold; line-height: 1; margin-bottom: 20px; }
  .main_btm_left > a { width: 100%; display: flex; background-color: #4c5f73; color: inherit; padding: 20px; box-sizing: border-box; font-size: 16px; font-weight: 500; letter-spacing: -0.5px; justify-content: space-between; align-items: center; border: 1px solid #4c5f73; }
  .main_btm_left > a:hover { border-color: #fff; transition: all 0.5s; }

  .main_btm_right { background-color: #229fff; position: absolute; right: 0;}
  .main_btm_rightbox01 {display: flex;flex-direction: column;/* gap: 40px; */padding-bottom: 20px;box-sizing: border-box;border-bottom: 1px dashed rgba(255, 255, 255, 0.7);}
  .main_btm_rightbox01 > p {font-size: 24px;font-weight: bold;color: #fff;display: flex;align-items: center;gap: 10px;}
  .main_btm_rightbox01 > p br{display:none;}
  .main_btm_rightbox01 > p > i { display: flex; align-items: center; justify-content: center; background-color: #fff; width: 30px; height: 30px; border-radius: 100%; box-sizing: border-box; }  
  .main_btm_rightbox01 > a { color: #229fff; width: 100%; background-color: #fff; font-weight: bold; font-size: 18px; display: flex; align-items: center; gap: 15px; justify-content: space-between; padding: 15px 30px; box-sizing: border-box; letter-spacing: -0.5px; border: 1px solid transparent; }
  .main_btm_rightbox01 > a:hover { transition: all 0.5s; border-color: #2d435b; color: #2d435b; }
  .main_btm_rightbox02 {padding-top: 20px;box-sizing: border-box;display: flex;flex-direction: column;gap: 10px;}
  .main_btm_rightbox02 > p {display: flex;align-items: center;gap: 10px;font-size: 24px;font-weight: bold;line-height: 1;}
  .main_btm_rightbox02 > p > i { display: flex; align-items: center; justify-content: center; background-color: #fff; width: 30px; height: 30px; border-radius: 100%; box-sizing: border-box; }
  .main_btm_rightbox02 > span { font-size: 16px; font-weight: 500; }


    .main_btm_rightbox01 .main_phone_info {}
    .main_btm_rightbox01 .main_phone_info .phone_info_tit {display: flex;align-items: center;gap: 8px;font-size: 16px;font-weight: 600;color: #fff;}
    .main_btm_rightbox01 .main_phone_info ul{/* display:flex; */margin-top: 10px;}
    .main_btm_rightbox01 .main_phone_info li{flex:1;}
    .main_btm_rightbox01 .main_phone_info li + li {margin-top: 5px;}
    .main_btm_rightbox01 .main_phone_info li a {display: block;padding: 10px;background: rgba(255, 255, 255, 0.14);color: #fff;text-decoration: none;word-break: keep-all;transition: background 0.2s;height: 100%;box-sizing: border-box;}
    .main_btm_rightbox01 .main_phone_info li a:hover {background: rgba(255, 255, 255, 0.24);}
    .main_btm_rightbox01 .main_phone_info .phone_tit {display: block;font-size: 13px;line-height: 1.5;color: rgba(255, 255, 255, 0.8);}
    .main_btm_rightbox01 .main_phone_info .phone_num {display: block;margin-top: 4px;font-size: 18px;font-weight: 700;letter-spacing: -0.25px;line-height: 1;color: #fff;}

  /* 메인푸터 */
  .main_footer_wrap { background-color: #3f444a; border-top: 0; }
  .main_footer_wrap .footer_top { background-color: #3f444a; }

  .main_footer_wrap .footer_top_box { height: auto; margin-top: 30px; position: relative; }
  .main_footer_wrap .footer_familysite { display:inline-block; z-index:10; background:#5c6065; height: 52px; width: 270px; position: absolute; top: 50px; right: 0; transform: translateY(-50%); }
  .main_footer_wrap .footer_familysite a.tg_btn {display: flex; align-items: center; justify-content: space-between; position:relative; padding: 0 20px; height: 100%; border: none; font-weight: 300; box-sizing: border-box; color: #fff; font-size: 16px; }

  .main_footer_wrap .footer_copyright,
  .main_footer_wrap .footer_list > li,
  .main_footer_wrap .footer_policy_list > li > a,
  .main_footer_wrap .footer_policy_list > li > a > strong { color: #fff; }

  .main_footer_wrap .footer_btm { padding-top: 30px; }
  .main_footer_wrap .footer_btm_left { display: flex; align-items: start; gap: 55px; }
  .main_footer_wrap .footer_list { position: static; }
  .main_footer_wrap .footer_list > li { padding-left: 0; }
  .main_footer_wrap .footer_list > li::before { display: none; }


@media(max-width:1400px){
  .main_mid_list { padding: 0; }
}

@media(max-width:1280px){
  .main_mid_list {gap: 25px;}
}
@media(max-width:1200px){
  .main_top_box > ul > li > a {  }
  .main_top_tit { gap: 30px; }
  .main_top_tit > h3 { font-size: 55px; }
  .main_search_box { width: 100%; flex-wrap: wrap; height: auto; }
  .main_search_box > label { padding: 15px; }
  .main_search_box button { width: 100%; line-height: 1; padding: 15px; }

  .main_mid_wrap { padding: 50px 0; }
  .main_mid_box { gap: 50px; }
  .main_mid_list { flex-wrap: wrap; gap: 20px; }
  .main_mid_list > li {flex: 1;/* width: calc(100%/2 - 10px); */}

  .main_mid_list > li > a { flex-direction: column;height: 100%;align-items: center; background-color: #fff; box-shadow: 0px 0px 15px 5px rgba(135, 138, 142, 0.15); border: 1px solid transparent; box-sizing: border-box; }
  .main_mid_list > li > a > i { box-shadow: none; border-right: 0;border-bottom: 1px solid #d9d9d9;width: 100%; }
  .main_mid_list > li > a:hover > i { border-width: 0px 0px 1px 0; }
  .main_mid_list > li > a:hover { transition: all 0.5s; border-color: #2d435b; }
    .mid_list_txt {width: 100%;padding: 10px;padding-top: 0;line-height: 1;box-sizing: border-box;text-align: center;}
  .mid_list_txt br { display: none; }

  .main_mid_detail { height: auto; flex-wrap: wrap; }
  .main_mid_detail > div { padding: 50px 30px; }
  .main_slider a img{height: 350px;}
  .main_notice_box { width: 100%; }

  .main_btm_cntbox > div { padding: 50px 30px; }

  .main_footer_wrap .footer_top_box { align-items: start; padding: 0; }
  .main_footer_wrap .footer_familysite { position: relative; transform: none; top: 0; }
  .main_footer_wrap .footer_list { margin-top: 0; }
}

@media(max-width:960px){
  .main_top_box { flex-wrap: wrap; height: auto; padding: 30px 0; box-sizing: border-box; }
  .main_top_tit { padding: 0; margin-bottom: 20px; }
  .main_top_box > ul { position: static; flex-direction: row; width: 100%; }
  .main_top_box > ul > li { width: 100%; height: auto; }
  .main_top_box > ul > li > a { padding: 20px 15px; gap: 15px; line-height: 1; flex-direction: row; font-size: 20px; }
  .main_top_box > ul > li > a > i { width: 40px; height: 40px; position: static; }
  .main_top_list02 a { flex-direction: row; }
  .main_top_list02 > li {  border: 1px solid #807c77; box-sizing: border-box;  }
  .main_top_list02 > li:last-of-type { border-left: 0; }



  .main_mid_detail > div { padding: 30px 20px; }

  .main_btm_wrap { background-color: #229fff; }
  .main_btm_map { position: relative; height: 260px; }
  .main_btm_box { height: auto; padding-top: 0; pointer-events: auto; }
  .main_btm_cntbox { display: flex; width: 100%; position: static; min-height: 205px; height: auto; }
  .main_btm_cntbox > div { position: static; width: 100%; padding: 20px 15px; height: auto; }

  .main_btm_left { gap: 15px; justify-content: start; }
  .main_btm_left > p { font-size: 20px; line-height: 1; margin-bottom: 0; }
  .main_btm_left > a { padding: 15px; height: 50px; }

  .main_btm_right { display: flex; flex-direction: column; }
  .main_btm_rightbox01 {/* gap: 15px; */padding-bottom: 15px;}
  .main_btm_rightbox01 > p { font-size: 20px; line-height: 1; }
  .main_btm_rightbox01 > a { padding: 15px; font-size: 16px; height: 50px; line-height: 1; }
  .main_btm_rightbox02 { gap: 5px; padding-top: 15px; }
  .main_btm_rightbox02 > p > i { width: 25px; height: 25px; }
  .main_btm_rightbox02 > span {line-height: 1.2;word-break: keep-all;letter-spacing: -0.95px;}
  .main_btm_rightbox02 > span br { display: none; }


  .main_btm_cntbox > div.main_btm_left{flex: 0 40%;}
  .main_btm_cntbox > div.main_btm_right{flex:1;}
  .main_btm_rightbox01 > p > i{width:25px;height:25px;flex: 0 25px;}
  .main_btm_rightbox01 .main_phone_info ul{display:flex;gap: 5px;}
  .main_btm_rightbox01 .main_phone_info li + li{margin-top:0;}
  .main_btm_rightbox02 > p{font-size:20px;}

  .main_slider a img{height:300px;}
}

@media(max-width:860px){
  .main_footer_wrap .footer_top_box { align-items: center; }
  .main_footer_wrap .footer_btm { padding-top: 20px; }
  .main_footer_wrap .footer_btm_left { gap: 20px; }
  .main_footer_wrap .footer_btm_box { justify-content: center; }

  .main_mid_list > li{flex:0 calc(50% - 10px);}

  .main_btm_cntbox{display: block;min-height: auto;}
  .main_btm_cntbox > div{flex-direction: row;align-items: center;padding: 15px;}
  .main_btm_left > p{flex: 0 190px;}
  .main_btm_left > a{flex: 1;height: 45px;padding: 12px;}
  .main_btm_cntbox > div.main_btm_right{flex-wrap: wrap;}
  .main_btm_rightbox01{flex-direction: row;flex: 1 100%;align-items: center;padding-bottom: 12px;gap: 15px;}
  .main_btm_rightbox01 > p{flex: 0 190px;}
  .main_btm_rightbox01 .main_phone_info{flex:1;}
  .main_btm_rightbox01 .main_phone_info ul{margin-top:0;}
  .main_btm_rightbox01 > a{flex: 1;height: 45px;padding: 12px;}
  .main_btm_rightbox02{flex-direction: row;align-items: center;padding-top: 12px;}
}

@media(max-width:640px){
  .main_top_tit > h3 {font-size: 34px;}
  .main_top_tit > h3 br { display: none; }

  .main_search_box > label > input { padding-right: 0; }
  .main_search_box button { padding: 10px; }

  .main_top_box > ul > li > a { font-size: 16px; word-break: keep-all; }
  .main_top_box > ul > li > a > img { height: 30px; max-width: 100%; }
  .main_top_box > ul > li > a > i { width: 30px; height: 30px; min-width: 30px; }

  .main_mid_wrap { padding: 30px 0; }
  .main_mid_list{gap:15px;}
  .main_mid_list > li { width: 100%; flex:0 100%;}
  .main_mid_list > li > a{flex-direction:row;height: auto;gap: 12px;}
  .main_mid_list > li > a > i {height: 60px;width: auto;border-bottom: 0;border-right: 1px solid #d9d9d9;}
  .main_mid_list > li > a:hover > i{border-width: 0px 1px 0px 0;}
  .mid_list_txt{padding: 0;padding-right: 10px;text-align: left;}
  .mid_list_txt > p { font-size: 16px; }
  .main_mid_box { gap: 30px; }

  .main_mid_detail > div { padding: 20px 15px; }
  .mid_detail_top { margin-bottom: 5px; }
  .mid_detail_top > p { font-size: 20px; }
  .mid_detail_top img { height: 20px; }
  .main_notice_list > li > a { padding: 10px 0; }
  .main_notice_list > li > a > p { font-size: 16px; }

  .main_slider { padding-top: 10px; }
  .main_slider a p { font-size: 16px; line-height: 1.3; padding: 0 15px; }

  .main_btm_cntbox > div {padding: 12px;}
  .main_btm_left > p  {font-size: 18px;flex: 0 140px;}
  .main_btm_left > a  {font-size: 14px;gap: 10px;word-break: keep-all;line-height: 1;padding: 10px;height: 40px;letter-spacing: -0.95px;}
  .main_btm_left > a > img{width: 15px;}
  .main_btm_rightbox01 > p {font-size: 18px;flex: 0 140px;word-break: keep-all;}
  .main_btm_rightbox01 > p br{display:block;}
  .main_btm_rightbox01 > a {font-size: 14px;gap: 10px;word-break: keep-all;padding: 10px;height: 40px;}
  .main_btm_rightbox01 .main_phone_info .phone_num{font-size:17px;}
  .main_btm_rightbox01 > a img:first-of-type { max-width: 100%; width: 25px; height: 25px; }
  .main_btm_rightbox02 > p{font-size:18px;}
  .main_btm_rightbox02 > span { font-size: 14px; }

  .main_footer_wrap .footer_familysite { width: 100%; }
}
@media(max-width:640px){
  .main_top_tit > h3{font-size:28px;}
  .main_mid_list > li > a > i > img{max-height:25px;}
  .main_slider a img{height:200px;}
}
@media(max-width:480px){
  .main_btm_box{padding-top: 0;height: auto;}
  .main_btm_left > p{font-size: 16px;flex: 0 100%;}
  .main_btm_left{gap:10px;flex-wrap: wrap;}
  .main_btm_left > a{height:35px;}
  .main_btm_rightbox01 > p{flex: 1 100%;font-size: 16px;}
  .main_btm_rightbox01 > p > i{width:20px;height:20px;flex:0 20px;}
  .main_btm_rightbox01 > p br{display:none;}
  .main_btm_rightbox01 .main_phone_info{flex:1 100%;width: 100%;}
  .main_btm_rightbox01 .main_phone_info li a{padding: 8px;}
  .main_btm_rightbox01 .main_phone_info .phone_num{font-size:15px;}
  .main_btm_rightbox01{padding-bottom:10px;flex-direction: column;align-items: baseline;gap: 10px;}
  .main_btm_rightbox01 > a img:first-of-type{width:20px;height:20px;}
  .main_btm_rightbox02{flex-direction:column;flex: 1 100%;justify-content: left;align-items: baseline;padding-top: 10px;}
  .main_btm_rightbox02 > p{align-self:baseline;font-size: 16px;}
  .main_btm_rightbox02 > p > i{width: 20px;height: 20px;}
  .main_btm_rightbox02 > p > i > img{width: 10px;}
  .main_btm_rightbox01 > a{height:35px;gap: 5px;letter-spacing: -0.95px;}
}