@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');

html {
  scroll-behavior: smooth;
}

.container {
  margin: 0 auto;
}

.body {
  font-size: 15px;
  /* //.글자폰트 크기 수정 */
  font-family: "Noto Sans KR";
}

.container {
  width: 66.67%;
  height: 100%;
}

/* ---------------------------------------------------------------- */
/* header */
header {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: #fff;
  position: fixed;
  z-index: 9999;
}

/* hc_con */
.hc_con {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}

/* 로고 */
.h_logo_menu {
  width: 66.67%;
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  background: #fff;
}

ul.gnb {
  width: 800px;
  height: 27px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ul.gnb>li {
  color: #333;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.198px;
  cursor: pointer;
}

ul.gnb>li:hover {
  color: #0F7BBD;
  transition: color 0.3s ease;
}

.sub {
  position: absolute;
  left: 0; top: 80px;
  width: 100%;
  height: 100vh;
  background: #fff;
  display: none;
}

.sub.on {
  display: flex;
  justify-content: center;
}

.sub_close_section {
  width: 920px;
  height: 386px;
  display: flex;
  justify-content: space-between;
  margin-left: 155px;
}

.sub_section {
  width: 860px;
  height: 386px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ul.sub_menu {
  height: 100%;
  color: #777;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.165px;
}

ul.sub_menu.comp_infor {
  width: 115px;
  margin-left: 10px;
}

ul.sub_menu.product_infor {
  width: 74px;
  margin-left: 60px;
}

ul.sub_menu.core_business {
  width: 190px;
  margin-left: 25px;
}

ul.sub_menu.customer_support {
  width: 74px;
  margin-left: 30px;
}

ul.sub_menu.competitiveness {
  width: 200px;
}

ul.sub_menu.affiliates {
  width: 130px;
  margin-right: 5px;
}

ul.sub_menu>li {
  margin-top: 10px;
}

ul.sub_menu>li:hover {
  color: #333;
  transition: color 0.3s ease;
  font-weight: 700;
}

ul.sub_menu>li:first-child {
  margin-top: 0;
}

ul.sub_sub_menu {
  color: #aaa;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.165px;
}

ul.sub_sub_menu>li {
  margin-top: 10px;
}

ul.sub_sub_menu>li:hover {
  color: #333;
  transition: color 0.3s ease;
  font-weight: 600;
}

li.solution>a>p {
  margin-top: 99px;
}

li.solution>ul>li {
  color: #aaa;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.165px;
  margin-top: 10px;
}

li.solution>ul>li:hover {
  color: #333;
  transition: color 0.3s ease;
  font-weight: 600;
}

/* 메뉴 닫기 버튼 */
.menu_close_btn {
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.menu_close_btn>i {
  font-size: 30px;
  color: #333;
}

.menu_close_btn>i:hover {
  color: #0F7BBD;
  transition: color 0.3s ease;
}

/* 채용버튼 */
.hire_btn {
  width: 70px;
  height: 30px;
  border-radius: 10px;
  cursor: pointer;
  background: #333;
}

.hire_btn>a>p {
  color: #FFF;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.198px;
  line-height: 30px;
}

.hire_btn:hover {
  background: #0F7BBD;
  transition: background-color 0.3s ease;
}

/* 햄버거 메뉴 */
.ham_menu {
  width: 23px;
  height: 20px;
  cursor: pointer;
}

.ham_menu>i {
  color: #aaa;
  font-size: 23px;
}

.ham_menu>i:hover {
  color: #333;
  transition: color 0.3s ease;
}

/* ---------------------------------------------------------------- */
/* main */
main {
  width: 100%;
  height: 100%;
}

/* fix */
main ul.fix {
  position: fixed;
  margin-top: 440px;
  margin-left: calc(100% - 130px);
  z-index: 10;
}

main ul.fix li {
  margin-top: 15px;
  width: 60px;
  height: 60px;
  border-radius: 50px;
  cursor: pointer;
}

main ul.fix li:first-child {
  margin-top: 0;
}

/* 퀵메뉴 */
main ul.fix li.fix_menu {
  background: #0F7BBD;
  display: flex;
  justify-content: center;
  align-items: center;
}

main ul.fix li.fix_menu>i {
  color: #fff;
  font-size: 40px;
}

main ul.fix li.fix_menu:hover {
  background: #fff;
  transition: background-color 0.3s ease;
}

main ul.fix li.fix_menu:hover i {
  color: #0F7BBD;
  transition: color 0.3s ease;
}

/* 퀵메뉴 */
.fix_menu_modal {
  display: none;
  position: fixed;
  margin-top: -240px;
  margin-left: -22px;
  z-index: 10;
}

.fix_menu_modal.on {
  display: flex;
  flex-direction: column;
}

ul.fix_menu_modal_quick {
  width: 100px;
  height: 135px;
}

.fix_menu_modal>ul.fix_menu_modal_quick>li.quick_btn {
  width: 100px;
  height: 30px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #eee;
}

.fix_menu_modal>ul.fix_menu_modal_quick>li.quick_btn>a>p {
  color: #AAA;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.198px;
  line-height: 30px;
}

.fix_menu_modal>ul.fix_menu_modal_quick>li.quick_btn:hover {
  background: #333;
  transition: background-color 0.3s ease;
  border: none;
}

.fix_menu_modal>ul.fix_menu_modal_quick>li.quick_btn:hover>a>p {
  color: #fff;
  transition: color 0.3s ease;
  border: none;
}


main ul.fix li.fix_go_home {
  background: #fff;
  display: flex;
}

.fix_go_home>a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

main ul.fix li.fix_go_home>a>i {
  color: #0F7BBD;
  font-size: 20px;
}

main ul.fix li.fix_go_home:hover {
  background: #0F7BBD;
  transition: background-color 0.3s ease;
}

main ul.fix li.fix_go_home:hover>a>i {
  color: #fff;
  transition: color 0.3s ease;
}

main ul.fix li.fix_top {
  background: #333;
}

.fix_top>a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

main ul.fix li.fix_top>a>i {
  color: #fff;
  font-size: 20px;
}

main ul.fix li.fix_top:hover {
  background: #fff;
  transition: background-color 0.3s ease;
}

main ul.fix li.fix_top:hover>a>i {
  color: #333;
  transition: color 0.3s ease;
}

.main_con {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 메인페이지 */
.main_page {
  width: 100%;
  height: 800px;
  background: #fff;
}

.swiper-slide {
  background: #000;
  width: 100%;
  height: 450px;
  border-radius: 50px;
}

.swiper-pagination {
  margin-bottom: 250px;
}

/* 메인페이지 배너 */
.banner_section {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.banner_op {
  opacity: 0.8;
  background: #000;
  overflow: hidden;
  border-radius: 50px;
}

.banner_tit_section {
  width: 800px;
  height: 358px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.banner_tit {
  width: 100%;
  color: #FFF;
  font-family: "Roboto";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 27px */
  letter-spacing: -0.198px;
}

.banner_main_sub_tit {
  width: 100%;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.banner_main_sub_tit.bms {
  height: 160px;
}

.banner_main_tit {
  width: 100%;
  color: #FFF;
  font-family: "Noto Sans KR";
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.44px;
  line-height: 150%; /* 60px */
}

.banner_sub_tit {
  color: #FFF;
  font-family: "Noto Sans KR";
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -0.275px;
  line-height: 150%; /* 37.5px */
}

.banner_btn {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.more_btn {
  width: 198px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.more_btn>a {
  width: 150px;
  height: 27px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.more_btn>a>p {
  color: #FFF;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.198px;
}

.more_btn>a>i {
  color: #fff;
  font-size: 13px;
  margin-top: 3px;
}

.more_btn:hover {
  background: #0F7BBD;
  transition: background-color 0.3s ease;
}

/* 멘트 */
.ment {
  width: 100%;
  height: 300px;
  background: #fff;
}

.ment_con {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ment_section {
  width: 100%;
  height: 250px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0F7BBD;
}

.ment_main_sub_tit {
  width: 620px;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.ment_main_tit {
  width: 100%;
  height: 60px;
}

.ment_main_tit>h2 {
  color: #FFF;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 40px;
  font-weight: 700;
  line-height: 150%; /* 60px */
  letter-spacing: -0.44px;
}

.ment_sub_tit {
  width: 100%;
  height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.ment_sub_tit>span {
  color: #FFF;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 25px;
  font-weight: 400;
  line-height: 150%; /* 37.5px */
  letter-spacing: -0.275px;
}

.ment_sub_tit>p {
  color: #FFF;
  text-align: center;
  font-family: "Roboto";
  font-size: 20px;
  font-weight: 400;
  line-height: 150%; /* 30px */
  letter-spacing: -0.22px;
}

/* ceo메시지, who we are */
.comp {
  width: 100%;
  height: 800px;
  background: #fff;
}

.comp_con {
  display: flex;
  justify-content: center;
  align-items: center;
}

.comp_section {
  width: 100%;
  height: 648px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.comp_lt {
  width: 600px;
  height: 100%;
  border-radius: 50px;
  background: #333;
}

.ceo_msg_section {
  width: 520px;
  height: 526px;
  margin-top: 55px;
  margin-left: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ceo_tit_main_tit {
  width: 100%;
  height: 205px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ceo_tit>p {
  color: #FFF;
  font-family: "Noto Sans KR";
  font-size: 18px;
  font-weight: 500;
  line-height: 150%; /* 27px */
  letter-spacing: -0.198px;
}

.ceo_main_tit>span {
  color: #FFF;
  font-family: "Noto Sans KR";
  font-size: 30px;
  font-weight: 700;
  line-height: 150%; /* 45px */
  letter-spacing: -0.33px;
}

.comp_rt {
  width: 648px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.wwa_main_sub_tit {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.wwa_main_tit {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wwa_main_tit>span {
  color: #333;
  text-align: center;
  font-family: "Roboto";
  font-size: 40px;
  font-weight: 700;
  line-height: 150%; /* 60px */
  letter-spacing: -0.44px;
}

.wwa_sub_tit {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wwa_sub_tit>p {
  color: #555;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 20px;
  font-weight: 400;
  line-height: 150%; /* 30px */
  letter-spacing: -0.22px;
}

.wwa_section {
  width: 100%;
  height: 500px;
  border-radius: 50px;
  background: #E5F1F9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wwa_section:hover {
  background: #333;
  transition: background-color 0.3s ease;
}

.wwa_tit_btn {
  width: 520px;
  height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 12px;
}

.wwa_tit_main_tit {
  width: 100%;
  height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.wwa_tit {
  width: 100%;
  height: 27px;
}

.wwa_tit>p {
  color: #A4DBFF;
  font-family: "Noto Sans KR";
  font-size: 18px;
  font-weight: 500;
  line-height: 150%; /* 27px */
  letter-spacing: -0.198px;
}

.wwa_main_ment_tit {
  width: 100%;
  height: 180px;
}

.wwa_main_ment_tit>span {
  color: #A4DBFF;
  font-family: "Noto Sans KR";
  font-size: 30px;
  font-weight: 700;
  line-height: 150%; /* 45px */
  letter-spacing: -0.33px;
}

.comp_section>img {
  position: absolute;
  left: 322px; top: 194px;
}

/* 누적 이용자 수 현황 */
.count {
  width: 100%;
  height: 800px;
  background: #000;
  position: relative;
}

.count_bar {
  width: 1px;
  height: 350px;
  background: #eee;
}

.count>img {
  width: 100%;
  height: 100%;
}

.count_con {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.count_section {
  width: 100%;
  height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.count_tit {
  width: 100%;
  height: 50px;
  background: #0F7BBD;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.count_tit>p {
  color: #FFF;
  font-family: "Noto Sans KR";
  font-size: 25px;
  font-weight: 700;
  line-height: 150%; /* 37.5px */
  letter-spacing: -0.55px;
}

.count_value_section {
  width: 100%;
  height: 350px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.count_value_card {
  width: 254px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.count_value_data {
  width: 100%;
  height: 85px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.count_value_main>span {
  color: #BBB;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 2.4px;
}

.count_value_sub>p {
  color: #BBB;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 1.2px;
}

.ly_value>span {
  color: #FFF;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 50px;
  font-weight: 700;
  letter-spacing: 3px;
}

.ly_value_data {
  height: 90px;
  margin-bottom: 7px;
}

.ly_value_sub>p {
  color: #fff;
}

/* 제품소개 */
.product {
  width: 100%;
  height: 800px;
  background: #fff;
}

.pro_con {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pro_lt {
  width: 600px;
  height: 660px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.pro_main_sub_tit {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.pro_main_tit {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
} 

.pro_main_tit>span {
  color: #333;
  text-align: center;
  font-family: "Roboto";
  font-size: 40px;
  font-weight: 700;
  line-height: 150%; /* 60px */
  letter-spacing: -0.44px;
}

.pro_sub_tit {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pro_sub_tit>p {
  color: #555;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 20px;
  font-weight: 400;
  line-height: 150%; /* 30px */
  letter-spacing: -0.22px;
}

.ip_card1 {
  width: 100%;
  height: 520px;
  border-radius: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: #0F7BBD;
}

.ip_card_img {
  width: 530px;
  height: 300px;
  background: #fff;
  border-radius: 30px;
  margin-top: 40px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.ip_card_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-in-out;
}

.ip_card_img:hover img {
  transform: scale(1.2);
}

.ip_card1_main_sub_tit {
  width: 530px;
  height: 125px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ip_card1_main_tit {
  width: 100%;
  height: 38px;
}

.ip_card1_main_tit>span {
  color: #FFF;
  font-family: "Noto Sans KR";
  font-size: 25px;
  font-weight: 500;
  line-height: 150%; /* 37.5px */
  letter-spacing: -0.275px;
}

.ip_card1_sub_tit {
  width: 100%;
  height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 34px;
}

.ip_card1_sub_tit>p {
  color: #FFF;
  font-family: "Noto Sans KR";
  font-size: 20px;
  font-weight: 400;
  line-height: 150%; /* 30px */
  letter-spacing: -0.22px;
}

.pro_rt {
  width: 600px;
  height: 660px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.pro_more_btn {
  width: 200px;
  height: 50px;
  border: none;
  background: #333;
}

.ip_card_rt {
  width: 600px;
  height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.ip_card2 {
  width: 100%;
  height: 240px;
  background: #E5F1F9;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ip_card2_img_tit {
  width: 560px;
  height: 200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ip_card2_img {
  width: 200px;
  height: 200px;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.ip_card2_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-in-out;
}

.ip_card2_img:hover img {
  transform: scale(1.2);
}

.ip_card2_main_sub_tit {
  width: 335px;
  height: 125px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ip_card2_main_tit {
  width: 100%;
  height: 38px;
}

.ip_card2_main_tit>span {
  color: #555;
  font-family: "Noto Sans KR";
  font-size: 25px;
  font-weight: 500;
  line-height: 150%; /* 37.5px */
  letter-spacing: -0.275px;
}

.ip_card2_sub_tit {
  width: 100%;
  height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 34px;
}

.ip_card2_sub_tit>p {
  color: #555;
  font-family: "Noto Sans KR";
  font-size: 20px;
  font-weight: 400;
  line-height: 150%; /* 30px */
  letter-spacing: -0.22px;
}

.ip_card3 {
  width: 100%;
  height: 240px;
  background: #333;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ip_card3_img_tit {
  width: 560px;
  height: 200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ip_card3_img {
  width: 200px;
  height: 200px;
  background: #000;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.ip_card3_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-in-out;
}

.ip_card3_img:hover img {
  transform: scale(1.2);
}

.ip_card3_main_sub_tit {
  width: 335px;
  height: 125px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ip_card3_main_tit {
  width: 100%;
  height: 38px;
  text-align: right;
}

.ip_card3_main_tit>span {
  color: #fff;
  font-family: "Noto Sans KR";
  font-size: 25px;
  font-weight: 500;
  line-height: 150%; /* 37.5px */
  letter-spacing: -0.275px;
}

.ip_card3_sub_tit {
  width: 100%;
  height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 34px;
  text-align: right;
}

.ip_card3_sub_tit>p {
  color: #fff;
  font-family: "Noto Sans KR";
  font-size: 20px;
  font-weight: 400;
  line-height: 150%; /* 30px */
  letter-spacing: -0.22px;
}

/* 제휴업체 로고 */
.alliance {
  width: 100%;
  height: 200px;
  background: #eee;
}

.all_con {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo-slider {
  overflow: hidden;
}

.logo-track {
  display: flex;
  width: max-content;
  animation: scroll 20s linear infinite;
}

.logo-track img {
  height: 80px;
  margin: 0 20px;
}

/* keyframes로 슬라이드 애니메이션 정의 */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.logo-slider:hover .logo-track {
  animation-play-state: paused;
}

/* 오시는길, 자료실, 문의하기, 인재채용 */
.etc_btn {
  width: 100%;
  height: 300px;
  background: #0F7BBD;
}

.etc_con {
  display: flex;
  justify-content: center;
  align-items: center;
}

ul.etc_card {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ul.etc_card>li {
  width: 300px;
  height: 100%;
  border-radius: 50px;
  background: #fff;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.etc_card_bg {
  width: 100%;
  height: 90px;
  background: #fff;
  position: absolute;
  left: 0; bottom: 0;
  border-radius: 0 0 50px 50px;
}

.etc_card_section {
  width: 230px;
  height: 132px;
  z-index: 2;
}

.etc_card_section>a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.etc_card_top {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.etc_card_top>span {
  color: #333;
  font-family: "Noto Sans KR";
  font-size: 23px;
  font-weight: 700;
  line-height: 150%; /* 34.5px */
  letter-spacing: -0.253px;
}

.etc_card_bottom {
  width: 100%;
  height: 50px;
}

.etc_card_bottom>p {
  color: #777;
  font-family: "Noto Sans KR";
  font-size: 15px;
  font-weight: 400;
  line-height: 150%; /* 22.5px */
  letter-spacing: -0.165px;
  margin-top: 14px;
}

ul.etc_card>li:hover .etc_card_bg {
  background: #333;
  transition: background-color 0.3s ease;
}

ul.etc_card>li:hover .etc_card_section .etc_card_bottom>p {
  color: #fff;
  transition: color 0.3s ease;
}

/* ---------------------------------------------------------------- */
/* footer */
footer {
  width: 100%;
  height: 450px;
  background: #333;
}

.footer_con {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer_section {
  width: 100%;
  height: 310px;
  display: flex;
  justify-content: space-between;
}

.footer_lt {
  width: 480px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer_lt_top {
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.f_logo_img {
  width: 100%;
  height: 30px;
}

ul.f_logo {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer_lt_bottom {
  width: 100%;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.footer_lt_b_top {
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

ul.address {
  display: flex;
}

ul.address>li {
  color: #FFF;
  font-family: "Noto Sans KR";
  font-size: 15px;
  font-weight: 700;
  line-height: 150%; /* 22.5px */
  letter-spacing: -0.165px;
}

ul.address>li:last-child {
  margin-left: 15px;
}

.repre_phone {
  width: 100%;
  height: 20px;
}

.repre_phone>span {
  color: #FFF;
  font-family: "Noto Sans KR";
  font-size: 13px;
  font-weight: 700;
  line-height: 150%; /* 19.5px */
  letter-spacing: -0.143px;
}

ul.repre_nm_no {
  display: flex;
}

ul.repre_nm_no>li {
  color: #FFF;
  font-family: "Noto Sans KR";
  font-size: 13px;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: -0.143px;
}

ul.repre_nm_no>li:last-child {
  margin-left: 15px;
}

.footer_lt_b_bottom {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

ul.alliance_address>li {
  display: flex;
  align-items: center; /* 수직 중앙 정렬 */
  gap: 10px;
}

ul.alliance_address>li>span {
  color: #FFF;
  font-family: "Noto Sans KR";
  font-size: 13px;
  font-weight: 700;
  line-height: 150%; /* 19.5px */
  letter-spacing: -0.143px;
  white-space: nowrap;
}

ul.alliance_address>li>p {
  color: #FFF;
  font-family: "Noto Sans KR";
  font-size: 13px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.143px;
}

.footer_rt {
  width: 290px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.fam_site select {
  height: 48px;
  border: 1px solid #fff;
  background: #333;
  outline: none;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 10px;

  padding: 0 40px 0 20px; /* 좌측 20px, 우측 40px 여백 */
  appearance: none;       /* 기본 화살표 제거 (브라우저마다 다름) */
  background-image: url('../img/down_icon.png'); /* 원하는 화살표 아이콘 */
  background-repeat: no-repeat;
  background-position: right 20px center; /* 우측 여백 맞추기 */
  background-size: 12px; /* 화살표 크기 */
}

.fam_site select:focus option 
{
  background: #fff;
  color: #333;
}

.pipp_copy {
  width: 100%;
  height: 55px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.pipp>span {
  color: #FFF;
  text-align: right;
  font-family: "Noto Sans KR";
  font-size: 15px;
  font-weight: 700;
  line-height: 150%; /* 22.5px */
  letter-spacing: -0.165px;
}

.copy>p {
  color: #FFF;
  text-align: right;
  font-family: "Noto Sans KR";
  font-size: 15px;
  font-weight: 400;
  line-height: 150%; /* 22.5px */
  letter-spacing: -0.165px;
}

/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */