@charset "utf-8";
:root {
	/*color*/
    --color-black:#111;
    --color-gray:#777;
    --color-gray05:#f1f1f1;
    --color-main:#006FFD;
    --color-hover:#f7f7f7;
    --color-red:#FF4267;
}

.w1320 {
    width: 1320px;
    position: relative;
    margin: 0 auto;
}
.w800 {
    width: 800px;
    position: relative;
    margin: 0 auto;
}
.w400 {
    width: 400px;
    position: relative;
    margin: 0 auto;
}
.pc_on {
    display: block; /*pc스타일on*/
}
.mob_on,
.mobile_back,
.app_nav,
.mob_img_box,
.mob_hamburger,
.mobile_logo,
.mobile_bnr,
.payment_request_link .icon_box,
.mob_logo_wrap {
    display: none !important; /*모바일스타일off*/
}
.mob_scroll_wrap {
    display: none;
}

/*scroll 공용스타일*/
.sc500 {
    position: relative; 
    bottom: -50px;
    opacity: 0;
}
.on_opacity {
    opacity: 1 !important;
    transition: 0.5s;
}
.on_left {
    left: 0 !important;
    transition: 0.5s;
}
.on_right {
    right: 0 !important;
    transition: 0.5s;
}
.on_bottom {
    bottom: 0 !important;
    transition: 0.5s;
}
.on_top {
    top: 0 !important;
    transition: 0.5s;
}



input:focus,
textarea:focus {
    border: 1.5px solid var(--color-main) !important;
}

/* 신청인 폼 테두리 및 스타일 */
.form_button_wrap {
     display: flex;
    flex-direction: column;

}

/* 폼 Hover 효과 */
/*.form_button_wrap:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
}*/

/* 신청인 제목과 화살표를 정렬하는 스타일 */
.form_header {
  align-items: center;
  width: 100%;
  padding: 0px 0px 0px 10px;
  margin: 0; /* 외부 마진 초기화 */
}


/* 신청인 제목 스타일 */
.form_title {
  display: flex;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 0;
  justify-content: center; /* 가로 중앙 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  margin-bottom: 10px;
}

.subp {
	display: flex;
  color: #666; /* 진한 회색 */
  font-weight: normal; /* 굵기 없음 */
  font-size: 14px; /* 적당한 글자 크기 */

  line-height: 1.5; /* 읽기 쉬운 줄 간격 */
  justify-content: center; /* 가로 중앙 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
}

/* 화살표 스타일 */
.arrow_icon {
  font-size: 18px;
  font-weight: bold;
  color: #888; /* 화살표 색상 */
  margin-right: 8px; /* 제목과 화살표 사이 간격 */
  transform: translateY(1px); /* 텍스트와 수직 정렬 */
}

/* 신청인 데이터 필드 스타일 */
.applicant_field {
  font-size: 16px;
  color: #666;
  padding: 15px 10px; /* 상하 간격 추가 */
  border-bottom: 2px solid #f7f7f7; /* 가로줄 추가 */
}

.applicant_field:last-child {
  border-bottom: none; /* 마지막 <p>는 가로줄 제거 */
}

/* 숨김 처리 */
.hidden {
  display: none;
}



/*모달추가*/
#applicantModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.modal-container input[type="text"] {
    width: 100%;
    height: 40px;
    padding: 5px;
    margin-bottom: 20px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.modal-container select {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    box-sizing: border-box;
}

.modal-content {
    font-size: 18px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 300px;
    margin: 0 auto;
}

.modal-content h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 25px 0;
    text-align: center;
    color: #333;
}

/* 버튼 스타일 */
.modal_button {
    display: inline-block;
    padding: 12px 20px;
    background-color: #007bff;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

.modal_button2 {
    display: inline-block;
    padding: 12px 20px;
    background-color: #007bff;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

.modal_button:hover {
    background-color: #004b99;     /* 마우스 오버 시 배경색 */
}

.modal_button:active {
    background-color: #003366;     /* 클릭 시 배경색 */
}

.modal_button:focus {
    outline: none;                 /* 포커스 테두리 제거 */
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.5); /* 포커스 시 외곽선 */
}

.toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: #007bff; /* 파란색 버튼 */
    color: white;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;


}

.toggle-btn:hover {
    background-color: #0056b3; /* 조금 더 어두운 파란색 */
}

.toggle-btn .arrow {
    margin-left: 8px;
    font-size: 14px;
    transition: transform 0.3s ease;
}

.toggle-btn.active .arrow {
    transform: rotate(180deg); /* 활성화 시 화살표 위쪽으로 회전 */
}


label {
    display: block;
    margin: 10px 0 5px;
}

#applicantModal input[type="text"] {
    width: 100%;
    height: 40px;
    padding: 5px;
    margin-bottom: 20px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}


.button-container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.selection_message {
    margin-top: 2px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
	text-align: right; /* 오른쪽 정렬 */
}

.blue_button,
.red_button {
    width: 49%;
    padding: 15px 0;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
}

.blue_button {
    background-color: #007bff;
    color: white;
}

.red_button {
    background-color: #dc3545;
    color: white;
}

.blue_button:hover {
    background-color: #0056b3;
}

.red_button:hover {
    background-color: #c82333;
}

/* 계좌정보 전체 감싸는 박스 */
.account_info_wrapper {
    padding: 10px;
    border-radius: 12px;
    background-color: #fff;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px; /* 항목 간 간격 */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	margin: 10px;
}

/* 개별 input 그룹 */
.input_group label {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 6px;
    display: block;
}

.input_group input, .input_group select {
    border: 1px solid #eee;
    padding: 14px 16px;
    width: 100%;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
    box-sizing: border-box;
}

/* 계좌번호와 인증 버튼이 나란히 배치 */
.account_row {
    display: flex;
    gap: 12px; /* 계좌번호와 버튼 간 간격 */
}

.account_row input {
    flex: 1;
}

.account_confirm {
    display: inline-block;
    padding: 12px 20px;
    background-color: #007bff;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

.account_confirm:hover {
    background-color: #0056b3;
}



/*팝업추가*/
.popup_box {
    max-width: 500px;
    max-height: 600px;
    position: fixed;
    z-index: 9999;
    margin-right: 30px;
}
.popup_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.popup_box .main_popup_btn {
    padding: 12px;
    box-sizing: border-box;
}
.popup_box .input_box,
.popup_box .main_popup_btn {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    background: #f9f9f9;
}
.popup_box .main_popup_btn input {
    display: none;
}
.popup_box .main_popup_btn label.copy {
    display: block;
    width:16px;
    height:16px;
    border: 1px solid #eee;
    border-radius: 4px;
}
.popup_box .main_popup_btn input+label.copy { 
    background: #fff;
}
.popup_box .main_popup_btn input:checked+label.copy {
    background: var(--color-main) url('../images/check.svg') no-repeat center;
}
.popup_box .main_popup_btn label.text,
.popup_box .main_popup_btn a {
    font-size: 14px;
    color:#71727A;
}

/*header*/
header {
    width: 100%;
    position: fixed;
    top:0px;
    left: 0px;
    z-index: 9;
    transition: 0.5s;
    background: #fff;
}
header nav {
    display: flex;
    width: 1320px;
    padding: 12px 0px;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    margin: 0 auto;
}
header nav .gnb_wrap {
    display: flex;
    padding: 0px 42px;
    align-items: center;
    gap: 42px;
}
header.scroll {
    background: rgba(255, 255, 255, 0.60);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    backdrop-filter: blur(12px);
}
/*
header.scroll nav {
    width: 100%;
    padding: 12px 32px;
} */
.logo_wrap a img {
    width: 160px;
}
.gnb_wrap li a {
    color:var(--color-gray);
    font-size: 16px;
    position: relative;
    border: none;
    background: none;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-duration: 400ms;
    transition-property: color;
}
.gnb_wrap li a.on,
.gnb_wrap li a:focus,
.gnb_wrap li a:hover {
    color: #111;
    font-weight: 800;
}
.gnb_wrap li a:focus:after,
.gnb_wrap li a:hover:after {
    width: 100%;
    left: 0%;
}
.gnb_wrap li a:after {
    content: "";
    pointer-events: none;
    bottom: -2px;
    left: 50%;
    position: absolute;
    width: 0%;
    height: 2px;
    background-color: #111;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-duration: 400ms;
    transition-property: width, left;
}
.btn_style {
    position: relative;
    margin: 0;
    padding: 12px 32px;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-main);
    /* border: 1px solid rgba(22, 76, 167, 0.6); */
    border-radius: 40px;
    color: var(--color-main);
    font-weight: 400;
    z-index: 0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
    box-shadow: -2px -2px 2px 0px rgba(255, 255, 255, 0.25) inset, 2px 2px 2px 0px rgba(255, 255, 255, 0.25) inset;
}
.btn_style span {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}
.btn_style:hover {
    animation: rotate624 0.7s ease-in-out both;
}
.btn_style:hover span {
    animation: storm1261 0.7s ease-in-out both;
    animation-delay: 0.06s;
}
@keyframes rotate624 {
    0% {
      transform: rotate(0deg) translate3d(0, 0, 0);
    }
    25% {
      transform: rotate(2deg) translate3d(0, 0, 0);
    }
    50% {
      transform: rotate(-2deg) translate3d(0, 0, 0);
    }
    75% {
      transform: rotate(1deg) translate3d(0, 0, 0);
    }
    100% {
      transform: rotate(0deg) translate3d(0, 0, 0);
    }
}
@keyframes storm1261 {
    0% {
      transform: translate3d(0, 0, 0) translateZ(0);
    }
    25% {
      transform: translate3d(4px, 0, 0) translateZ(0);
    }
    50% {
      transform: translate3d(-3px, 0, 0) translateZ(0);
    }
    75% {
      transform: translate3d(2px, 0, 0) translateZ(0);
    }
    100% {
      transform: translate3d(0, 0, 0) translateZ(0);
    }
}
.btn_style {
    border: 1px solid;
    overflow: hidden;
    position: relative;
}
.btn_style span {
    z-index: 20;
}
.btn_style:after {
    background: #fff;
    content: "";
    height: 155px;
    left: -75px;
    opacity: 0.4;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 50px;
    z-index: -10;
}
.btn_style:hover:after {
    left: 120%;
    transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
}  
.kakao_link {
    position: fixed;
    bottom: 100px;
    right: 200px;
    z-index: 9;
}
.kakao_link img {
    transition: 0.3s;
}
.kakao_link:hover img {
    transform: scale(1.1);
}
.text_hidden {
    overflow: hidden;
}

/*메인*/
main .main_bnr {
    width: 100vw;
    height: 90vh;   
    max-height: 900px;
    background: linear-gradient(94.54deg, #DEE6ED 2.7%, #ACD2F6 84.67%);
    background: url(../images/main_bnr_bg.png) no-repeat;
    background-size: cover;
    background-position: center;
}
.main_bnr_content_wrap {
    display: flex;
    flex-direction: column;
    gap: 44px;
    padding-top: 285px;
    position: relative;
    z-index: 1;
}
main .main_bnr h2 {
    color: #111;
    text-align: center;
    font-size: 52px;
    font-weight: 500;
    position: relative;
    top: 170px;
    opacity: 0;
}
main .main_bnr h2 span {
    font-weight: 700;
}
main .main_bnr .text_hidden .tag_wrap {
    text-align: center;
    position: relative;
    top: 170px;
    opacity: 0;
}
main .main_bnr .text_hidden span.tag {
    display: inline-block;
    margin-right: 12px;
    font-weight: 700;
    color:#333;
    text-decoration: underline;
}
main .main_bnr .text_hidden p {
    font-size: 20px;
    text-align: center;
    margin: 12px 0 40px 0;
    letter-spacing: -1px;
    position: relative;
    top: 170px;
    opacity: 0;
}
main .main_bnr .main_bnr_img_box {
    position: absolute;
    top: 0;
    height: 100%;
    overflow: hidden;
}
main .main_bnr img.img_coin {
    position: relative;
    left: 16vw;
    width: 70%;
}
main .main_bnr img.img_hand {
    width: 100%;
    position: absolute;
    bottom: 116px;
    left: 0;
}
.main_bnr_content_wrap .main_btn_wrap {
    opacity: 0;
}
.main_btn_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 42px;
}
.main_btn_wrap li a {
    display: flex;
    padding: 16px 36px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 20px;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-main);
    position: relative;
    border: 1px solid var(--color-main);
    background: rgba(0, 111, 253, 0.10);
    transition: all 1s cubic-bezier(0.23, 1, 0.320, 1);
    overflow: hidden;
    box-shadow: -2px -2px 2px 0px rgba(255, 255, 255, 0.25) inset, 2px 2px 2px 0px rgba(255, 255, 255, 0.25) inset;
}
.main_btn_wrap li a::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    border-radius: inherit;
    scale: 0;
    z-index: -1;
    background-color: var(--color-main);
    transition: all 1s cubic-bezier(0.23, 1, 0.320, 1);
    opacity: 0;
}
.main_btn_wrap li a:hover::before {
    scale: 6;
    opacity: 1;
}
.main_btn_wrap li a:hover {
    color: white;
    scale: 1;
    box-shadow: 0 0px 20px rgba(0, 111, 253, 0.4);
}

.bnr_wrap {
    width: 290px;
    position: absolute;
    top: 350px;
    right: 300px;
}
.autoplay {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.autoplay_item_img {
    width: 100%;
	border-radius: 12px;
}
.main_content01 {
    background: url(../images/pc_main_bg01.png) no-repeat;
    background-position: center;
    background-size: cover;
    height: 1170px;
}
.main_content01 .txt_box {
    padding-top: 154px;
}

/*메인컨텐츠 텍스트 공용스타일*/
main .txt_box h2 {
    font-size: 40px;
}
main .txt_box h2 span.font-regular {
    font-weight: 500;
}
main .txt_box p {
    font-size: 20px;
    color:#777;
    padding: 40px 0 24px 0;
}
main .txt_box p span.font-point {
    color:#111;
}
main .txt_box p span.font-bold {
    font-weight: bold;
}
main .txt_box span.font-info {
    font-size: 14px;
    color:#777;
}
.main_content01 .txt_box h2,
.main_content02 .txt_box h2,
.main_content03 .txt_box h2,
.main_content04 .txt_box h2,
.main_content05 .txt_box h2,
.main_content01 .txt_box p,
.main_content02 .txt_box p,
.main_content03 .txt_box p,
.main_content05 .txt_box p,
.main_content01 .txt_box .font-info { /*스크롤스타일*/
    position: relative;
    top: 50px;
    opacity: 0;
}
/*메인컨텐츠 텍스트 공용스타일끝*/

.main_content02 {
    /* display: grid;
    grid-template-columns: 0.9fr 1.2fr 0.9fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    "img_box01 . ."
    "img_box01 txt_box img_box02"
    ". . img_box02"; */
    position: relative;
    top: -70px;
    display: flex;
    justify-content: space-between;
}
.main_content02 .img_box01 { 
    grid-area: img_box01; 
    opacity: 0;
    width: 370px;
}
.main_content02 .img_box02 { 
    grid-area: img_box02; 
    opacity: 0;
    width: 370px;
}
.main_content02 .txt_box { 
    grid-area: txt_box; 
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.main_content02 img {
    display: block;
    width: 100%;
}
.main_content03 {
    background: #F5F5F5;
    padding: 160px 0;
}
.main_content03 .content03_wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.main_content03 .content03_wrap .txt_box {
    position: relative;
    top: 30px;
}
.main_content03 .img_box01,
.main_content03 .img_box02 {
    opacity: 0;
}






.main_content04 {
    margin: 160px auto;
}
.content04_wrap {
    display: flex;
    flex-wrap: wrap;
    margin: 80px 0;
}
.content04_wrap li {
    width: calc(100% / 2);
    display: flex;
    gap: 30px;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
    top: 50px;
    opacity: 0;
}
.content04_wrap li:nth-child(1) .img_box {
    background: #F4F4F4;
}
.content04_wrap li:nth-child(2) .img_box {
    background: #FFDDDD;
}
.content04_wrap li:nth-child(3) .img_box {
    background: #DEF5FF;
}
.content04_wrap li:nth-child(4) .img_box {
    background: #FFF3D6;
}
.content04_wrap li .img_box {
    width: 180px;
    height: 180px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content04_wrap h3 {
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 18px;
}
.content04_wrap p {
    font-size: 16px;
    color:#333;
    font-weight: 500;
}
.main_content05 {
    background: url(../images/pc_main_bg02.png) no-repeat center/cover;
    height: 1170px;
}
.content05_box {
    text-align: right;
}
.content05_box .txt_box {
    padding-top: 395px;
}
.content05_box .txt_box h2,
.content05_box .txt_box p{
    color: white;
}
.content05_box .txt_box p {
    padding: 60px 0 80px 0;
}
.content05_box .btn_box {
    display: flex;
    justify-content: flex-end;
    position: relative;
    top: 50px;
    opacity: 0;
}
.btn-information {
    padding: 16px 32px;
}
.btn-information span {
    font-size: 20px;
}
/*메인끝*/

/*서브공용스타일*/
.margin170 {
    margin: 170px auto;
}
.sub_title_box h2 {
    font-size:20px;
    color:#111;
}
.sub_title_box h2 span.font-blod {
    font-weight: 900;
}
.sub_title_box p {
    font-size: 14px;
    color:#71727A;
    padding-top: 16px;
}
.tab_style {
    width: 100%;
    background: #F8F8F8;
    border-radius: 16px;
    padding: 4px;
    box-sizing: border-box;
    margin: 100px 0 42px 0;
    position: relative;
    /* top: -55px; */
}
.tab_style>ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tab_style>ul>li {
    width: calc(100% /3);
    background: rgba(255, 255, 255, 0);
    border-radius: 12px;
    padding: 12px 0;
    text-align: center;
    box-sizing: border-box;
}
.tab_style.tab_style2>ul>li {
    /*width: calc(100% /2);*/
    width: 100%;
    box-sizing: border-box;
}
.tab_style>ul>li a{
    display: block;
    width: 100%;
    height: 100%;
    font-size: 16px;
    font-weight: 700;
    color:#71727A;
}
.tab_style>ul>li.on {
    background: rgba(255, 255, 255, 1);
}
.tab_style>ul>li.on a {
    color:#111;
}
/*버튼*/
.KAIROS_button_box {
    display: flex;
    flex-direction: column;
    gap:16px;
}
.KAIROS_button_box2,
.KAIROS_button_box3 {
    display: flex;
    gap: 16px;
    justify-content: center;
}
.KAIROS_button_boxx4 {
    display: flex;
    flex-direction: column;
    gap:6px;
	margin-bottom: 50px;
}
.KAIROS_button_box button,
.KAIROS_button_box2 button,
.KAIROS_button_box3 button {
    width: 100%;
    border-radius: 10px;
    padding: 14px 16px;
    box-sizing: border-box;
    transition: 0.3s;
}
.KAIROS_button_box3 button,
.registration_Popup04_close,
.logout_info_close,
.withdrawal_info_close,
.my_card_del_close,
.mypage0102_popup_close,
.mypage02_popup_close {
    width: 160px;
}
.registration_Popup06_close,
.KAIROS_button_box button.blue_button,
.KAIROS_button_box2 button.blue_button,
.KAIROS_button_box3 button.blue_button {
    background: var(--color-main);
    color:white;
}
.registration_Popup06_close,
.KAIROS_button_box button.blue_button:hover,
.KAIROS_button_box2 button.blue_button:hover,
.KAIROS_button_box3 button.blue_button:hover {
    background: #114b95;
}
.KAIROS_button_box button.blue2_button,
.KAIROS_button_box2 button.blue2_button,
.KAIROS_button_box3 button.blue2_button {
    background: #4c8ee3;
    color:white;
}
.KAIROS_button_box button.blue2_button:hover,
.KAIROS_button_box2 button.blue2_button:hover,
.KAIROS_button_box3 button.blue2_button:hover {
    background: var(--color-main);
}

.KAIROS_button_box button.white_button,
.KAIROS_button_box2 button.white_button,
.KAIROS_button_box3 button.white_button {
    background: white;
    color:var(--color-main);
}
.KAIROS_button_box button.white_button:hover,
.KAIROS_button_box2 button.white_button:hover,
.KAIROS_button_box3 button.white_button:hover {
    color:#114b95;;
}
.KAIROS_button_box button.gray_button,
.KAIROS_button_box2 button.gray_button,
.KAIROS_button_box3 button.gray_button,
.KAIROS_button_box3 button.registration_Popup04_close,
.KAIROS_button_box3 button.logout_info_close,
.KAIROS_button_box3 button.withdrawal_info_close,
.mypage0102_popup_close,
.mypage02_popup_close {
    border: 1px solid #eee;
    background: white;
    color: #515151;
}
.KAIROS_button_box button.gray_button:hover,
.KAIROS_button_box2 button.gray_button:hover,
.KAIROS_button_box3 button.gray_button:hover,
.KAIROS_button_box3 button.registration_Popup04_close:hover,
.KAIROS_button_box3 button.logout_info_close:hover,
.KAIROS_button_box3 button.withdrawal_info_close:hover,
.mypage0102_popup_close:hover,
.mypage02_popup_close:hover {
    background: #efefef;
}
.KAIROS_button_box button.gray_bg_button,
.KAIROS_button_box2 button.gray_bg_button,
.KAIROS_button_box3 button.gray_bg_button {
    background: #EEEEEE;
    color:white;
}
.KAIROS_button_box button.gray_bg_button:hover,
.KAIROS_button_box2 button.gray_bg_button:hover,
.KAIROS_button_box3 button.gray_bg_button:hover {
    background: #D5D5D5;
}
.KAIROS_button_box button span,
.KAIROS_button_box2 button span,
.KAIROS_button_box3 button span {
    font-size: 16px;
    font-weight: 700;
}
.KAIROS_button_box button.gray_button span,
.KAIROS_button_box2 button.gray_button span,
.KAIROS_button_box3 button.gray_button span,
.registration_Popup04_close span,
.logout_info_close span,
.withdrawal_info_close span,
.mypage0102_popup_close,
.mypage02_popup_close {
    font-weight: 400;
}
.KAIROS_button_box3.alarm {
    justify-content: flex-end;
    margin-top: 100px;
}

/*폼스타일*/
.form_style input {
    border: 1.2px solid #efefef;
    padding: 14px 16px;
    width: 100%;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
    box-sizing: border-box;
    caret-color: var(--color-main);
}
.form_style input[type="hidden"] {
    display: none; /* 화면에서 완전히 제거하여 자리 차지 방지 */
}
.form_style textarea {
    font-size: 16px;
    font-weight: 500;
    caret-color: var(--color-main);
}
.form_style input::placeholder,
.form_style textarea::placeholder {
    font-weight: 400;
    font-size: 15px;
    color:#71727a;
}
.form_style .password_box {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-42%);
    cursor: pointer;
}
.form_style .password_box img {
    width: 18px;
}
.form_style .radio_box {
    margin: 40px 0 100px 0;
}
.form_style .radio_box li {
    border: 1px solid #eee;
    padding: 14px 16px;
    width: 100%;
    border-radius: 12px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    box-sizing: border-box;
}
.form_style .radio_box li.check {
    background: #DFECFC;
}
.form_style .radio_box li .label_box {
    width: 90%;
    display: flex;
    align-items: center;
}
.form_style .radio_box li .label_box label {
    display: block;
    width: 100%;
}
.form_style .radio_box li .input_box input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgba(0, 111, 253, 0);;
    border:none !important;
    border-radius: 0%;
}
.form_style .radio_box li .input_box input[type="radio"]:checked {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none !important;
    background: url(../images/icon_check.svg) no-repeat center;
}
.form_style .form_input_wrap {
    margin: 40px 0 100px 0;
}
.form_style .form_input_wrap > ul > li {
    margin-bottom: 24px;
    position: relative;
}
.form_style .form_input_wrap p.title {
    color:#333;
    font-weight: 700;
    padding-bottom: 8px;
}
.form_style .form_input_wrap span.red_star {
    color:var(--color-red);
    display: inline-block;
    margin-left: 4px;
}
.form_style .form_input_wrap .profile_wrap {
    display: flex;
    gap: 20px;
    align-items: center;
}
.form_style .form_input_wrap .profile_wrap .img_box {
    padding: 20px;
}
.form_style .form_input_wrap .profile_wrap .img_box img {
    border-radius: 100%;
    width: 80px;
    height: 80px;
    border: 1px solid #f9f9f9;
}
.form_style .form_input_wrap .profile_wrap input {
    display: none;
}
.form_style .form_input_wrap .profile_wrap .file_profile {
    border: 1px solid #eee;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 24px;
    box-sizing: border-box;
    border-radius: 4px;
}
.form_style .form_input_wrap .profile_wrap .file_profile:hover {
    background: var(--color-main);
    border: 1px solid var(--color-main);
    color:#fff;
}
.form_style .form_input_wrap .profile_wrap button {
    border: 1px solid #eee;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 24px;
    box-sizing: border-box;
    color:#71727A;
    border-radius: 4px;
}
.form_style .form_input_wrap .profile_wrap button:hover {
    background: #adadad;
    border: 1px solid #adadad;
    color:#fff;
}

.code_number_wrap {
    text-align: center;
}
.code_number_wrap > h2 {
    font-size: 18px;
    font-weight: 800;
    color:#111;
}
.code_number_wrap > p {
    font-size: 14px;
    color:#71727A;
    margin: 8px 0;
}
.code_number_wrap > p span {
    display: block;
}
.code_number_wrap .timer_box {
    color:var(--color-red);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:8px;
}
.code_number_wrap .code_wrap {
    margin: 40px 0 100px 0;
}
.code_number_wrap .code_wrap input {
    width: 48px;
    height: 48px;
}
.form_style .use_consent_box {
    display: flex;
    gap: 8px;
    align-items: center;
}
.form_style .use_consent_box .input_box input {
    display: none;
}
.form_style .use_consent_box .input_box label {
    display: block;
    width:20px;
    height:20px;
    border: 1px solid #111;
    border-radius: 4px;
}
.form_style .use_consent_box2 {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
}
.form_style .use_consent_box2 .wrap_box {
    display: flex;
    gap: 12px;
    align-items: center;
}
.form_style .use_consent_box2 .wrap_box span {
    color:var(--color-main);
    font-weight: 600; 
}
.form_style .use_consent_box2 label {
    font-size: 16px !important;
}
.form_style .use_consent_box2 .wrap_box ~ span {
    font-size: 14px;
    color:#666;
}
.form_style .use_consent_box2 .wrap_box ~ span a {
    color:var(--color-main);
    font-weight: 600;
}
.form_style #use_consent+label, 
.form_style #use_consent02+label,
.form_style #use_consent03+label { 
    background: #fff;
}
.form_style #use_consent:checked+label,
.form_style #use_consent02:checked+label,
.form_style #use_consent03:checked+label {
    background: var(--color-main) url('../images/check.svg') no-repeat center;
}
.form_style .use_consent_box label {
    font-size: 14px;
    color:#111;
}
.form_style .use_consent_box > label a,
.form_style .use_consent_box > label span {
    color:var(--color-main);
    font-weight: 700;
}
.form_style .blue_link_style_wrap {
    position: relative;
}
.form_style a.blue_link_style {
    background: var(--color-main);
    color:#fff;
    font-size: 14px;
    border: 1px solid var(--color-main);
    box-sizing: border-box;
    padding: 6px 10px;
    border-radius: 8px;
    position: absolute;
    right: 8px;
    top: 6px;
    transition: 0.3s;
}
.form_style .switch_wrap .item01 {
    padding-bottom: 60px;
    margin-bottom: 60px;
    border-bottom: 1px solid #eee;
}
.form_style .switch_wrap .item01,
.form_style .switch_wrap .item02 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.form_style .switch_wrap .txt_box b {
    font-size: 18px;
    font-weight: 800;
}
.form_style .switch_wrap .txt_box p {
    font-size: 14px;
    color:#71727A;
    padding-top: 10px;
}
.form_style .switch_wrap .switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 55px;
    height: 32px;
}
.form_style .switch_wrap .switch input {
    display: none;
    opacity: 0;
    width: 0;
    height: 0;
}
.form_style .switch_wrap .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #EEE;
    transition: .2s;
    border-radius: 30px;
}
.form_style .switch_wrap .slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    border-radius: 20px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    transition: .4s;
}
.form_style .switch_wrap input:checked + .slider::before {
    background-color: #fff;
}
.form_style .switch_wrap input:checked + .slider {
    background-color: var(--color-main);
}
.form_style .switch_wrap input:focus + .slider {
    box-shadow: 0 0 1px var(--color-main);
}
.form_style .switch_wrap input:checked + .slider:before {
    transform: translateX(22px);
}

/*넘버스타일X*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox  */
input[type='number'] {
  -moz-appearance: textfield;
}

input[type="hidden"] {
    display: none; /* 요소를 화면에서 완전히 제거 */
}

.password_item00, .password_item01, .password_item02 {
    position: relative;
    margin-bottom: 8px;
}
h3.content_title {
    font-size: 20px;
    font-weight: 700;
	margin-bottom: 12px;
}

/* 부제목 */
h2.card-subtitle {
    font-size: 14px;
    color: #666;
    margin: 0 0 20px 0;
}
.payment_item_box ul li {
    border: 1px solid #eee;
    border-radius: 20px;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 16px;
    transition: 0.5s;
}
.payment_item_box ul li:hover {
    background: var(--color-hover);
}
.payment_item_box ul li:hover .img_box img {
    -webkit-filter: grayscale(100%) brightness(0);
    filter: grayscale(100%) brightness(0);
}
.payment_item_box .payment_txt b {
    margin-top: 16px;
}
a.payment_list_btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 8px;
    box-sizing: border-box;
}
.payment_txt span {
    display: inline-block;
    font-size: 14px;
    color:#fff;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 14px;
    min-width: 74px;
    box-sizing: border-box;
    text-align: center;
}
.payment_txt span.Tag00 {background:  #114b95; color:#fff;} /*승인대기*/
.payment_txt span.Tag01 {background:  #114b95; color:#fff;}/*결제대기*/
.payment_txt span.Tag02 {background: #E00707; color:#fff;}/*결제완료*/
.payment_txt span.Tag03 {background: #3fc600; color:#fff;}/*송금완료*/
.payment_txt span.Tag04 {background: #eee; color:#9e9e9e; }/*요청철회*/
.payment_txt b {
    display: block;
    font-weight: 700;
    margin-bottom: 4px;
    color:#111;
}
.payment_txt p {
    font-size: 14px;
    color:#71727A;
}
.payment_new_btn {
	width: 100%; /* 가로로 꽉 채움 */
    background-color: #92f3ee; /* 파란색 배경 */
    color: #FFFFFF; /* 흰색 텍스트 */
    border: none; /* 테두리 제거 */
    border-radius: 10px; /* 라운드 모서리 */
    padding: 15px 20px; /* 여백 추가 */
    font-size: 16px; /* 글씨 크기 */
    font-weight: bold; /* 글씨 두껍게 */
    cursor: pointer; /* 마우스 커서를 포인터로 */
    display: inline-flex; /* 버튼 내부 내용 정렬 */
    align-items: center; /* 수직 가운데 정렬 */
    justify-content: center; /* 수평 가운데 정렬 */
    gap: 8px; /* 아이콘과 텍스트 간격 */
    transition: background-color 0.3s ease; /* 호버 시 배경색 전환 애니메이션 */
	margin: 10px 0px 20px 0px;
}
.payment_new_btn .text {
    font-size: 18px;
    font-weight: 700;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    z-index: 1;
    transition-duration: 0.3s;
}
.payment_new_btn img {
    transition: 0.8s;
}
.payment_new_btn:hover .text {
    color:#000;
}
.payment_new_btn:hover img {
    -webkit-filter: grayscale(100%) brightness(0);
    filter: grayscale(100%) brightness(0);
    transform: rotate(180deg);
}
.payment_list_wrap .payment_list_tab {
    display: flex;
    gap: 32px;
    margin: 16px 0;
}
.payment_list_wrap .payment_list_tab li {
    padding: 8px 10px;
    box-sizing: border-box;
}
.payment_list_wrap .payment_list_tab li.on a {
    color:#000;
    font-weight: 700;
}
.payment_list_wrap .payment_list_tab li.on a::after {
    display: block;
}
.payment_list_wrap .payment_list_tab li a {
    display: inline-block;
    font-size: 18px;
    color:#71727A;
    text-align: center;
    padding-bottom: 8px;
}
.payment_list_wrap .payment_list_tab li a::after {
    content: '';
    display: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--color-main);
    position: relative;
    top: 4px;
}
.payment_list_wrap .payment_item_box {
    margin-bottom: 100px;
	margin-bottom: 20px;
        border-radius: 12px;
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.payment_list_wrap .payment_list .payment_list_btn {
    border-bottom: 1px solid #eee;
}
.payment_list_wrap .payment_list .payment_list_btn:hover {
    background: var(--color-hover);
}
.payment_list_wrap .payment_list .payment_list_btn:hover .img_box img {
    -webkit-filter: grayscale(100%) brightness(0);
    filter: grayscale(100%) brightness(0);
}
.payment_list_wrap .payment_list .payment_txt {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: flex-start;
}
.payment_bill_content {
    margin-bottom: 120px;
}
.bill_box {
    /* background: #fff; */
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 12px;
    padding: 40px;
    box-sizing: border-box;
    margin: 50px 0;
    position: relative;
}
.bill_box::before,
.bill_box::after {
    content: '';
    display: block;
    width: 15px;
    height: 30px;
    border-radius: 100%;
    position: absolute;
    bottom: 98px;;
    background: #f3f3f3;
}
.bill_box::before {border-radius: 0 150px 150px 0; left: 0;}
.bill_box::after {border-radius: 150px 0 0 150px; right: 0;}
.bill_box ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
}
.bill_box h3 {
    font-size: 18px;
    font-weight: 700;
    color:#111;
    margin: 28px 0;
}
.bill_box ul li b {
    font-size: 16px;
    color: #71727A;
    font-weight: 500;
}
.bill_box ul li b.bill_bold_txt {
    color:#343434;
    font-size: 24px;
    font-weight: 800;
}
.bill_box ul li span.bill_bold_txt {
    color:var(--color-red);
    font-size: 24px;
    font-weight: 800;
}
.bill_box ul li span {
    font-size: 16px;
    color:#222;
    font-weight: 500;
    text-align: right;
    width: 64%;
}
.bill_box ul li span.bill_blue_txt {
    color:var(--color-main);
}
.bill_box ul li.dotted_list {
    background: url(../images/Divider.png)no-repeat bottom;
    background-size: 100%;
    margin-bottom: 20px;
}
.bill_box ul li div.file_box span {
    display: block;
    width: 100%;
}
.bill_box.bill_more_box .bill_more {
    display: flex;
    justify-content: center;
    align-items: center;
    color:#222;
    font-weight: 700;
    gap:8px;
    margin-bottom: 24px;
}
.bill_box.bill_more_box ul li {
    display: none;
}
.bill_box.bill_more_box ul li.on {
    display: flex;
}
.bill_box.bill_more_box ul li.dotted_list,
.bill_box.bill_more_box ul li:last-child {
    display: flex;
}
.radio-buttons {
    display: flex;
    flex-direction: column;
    color: white;
    width: 100%;
}
.radio-buttons2 {
    display: flex;
    flex-direction: row;
    gap:12px;
}
.radio-buttons2 span {
    color:#71727A;
    font-size: 14px;
    font-weight: 500;
}
.radio-button {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.radio-button input[type="radio"] {
    display: none;
}
.radio-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #aaa;
    position: relative;
    margin-right: 10px;
    box-sizing: border-box;
}
.radio-circle::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ddd;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.2s ease-in-out;
}
.radio-button input[type="radio"]:checked + .radio-circle {
    border: 4px solid var(--color-main);
    background: var(--color-main);
}
.radio-button input[type="radio"]:checked + .radio-circle::before {
    transform: translate(-50%, -50%) scale(1);
    background: #fff;
}
.radio-label {
    color:#71727A;
    font-size: 18px;
    font-weight: 700;
}
.radio-label.on {
    color:#111;
}
.backon {
    content: "";
    width: 100%;
    height: 100%;
    background: #00000054;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
.backon2 {
    content: "";
    width: 100%;
    height: 100%;
    background: #00000054;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
.registration_Popup01_open {
    display: flex;
    justify-content: space-between;
	background: #fff;
    padding: 14px 16px;
    box-sizing: border-box;
    border-radius: 5px;
}
.registration_Popup01_open .left_wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap:20px;
    font-size: 16px;
    color:#333;
    font-weight: 700;
}
.registration_Popup01_open .img_box {
    display: flex;
    align-items: center;
}
#registration_popup01,
#registration_popup02,
#registration_popup03,
#registration_popup04,
#registration_popup05,
#registration_popup06,
#logout_info,
#withdrawal_info,
#mypage0102_popup,
#mypage02_popup,
#offline_popup,
#payment_Popup01,
#my_card_del,
#card_plus_popup,
#terms_popup,
#registration_info_popup {
    display: none;
    width: 500px;
    height: auto;
    padding: 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -250px;
    background-color: #fff;
    z-index: 9999;
    border-radius: 30px;
    box-sizing: border-box;
}
#terms_popup {
    display: none;
    width: 60%;
    height: auto;
    padding: 20px;
    position: fixed;
    top: 40%;
    left: 50%;
    margin: -250px 0 0 -30%;
    background-color: #fff;
    z-index: 9999;
    border-radius: 30px;
    box-sizing: border-box;
}
.Privacy_wrap,
.terms_wrap {
    height: 500px !important;
}
.offline_popup_close,
.registration_Popup03_close,
.registration_info_close {
   position:absolute;
   top:-25px;
   right: 0;
   cursor:pointer;
}
#registration_popup03 p,
#registration_popup05 p,
#registration_info_popup p {
    margin-top: 8px;
}
#registration_popup06 .title,
#registration_popup04 .title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
#registration_popup06 b,
#registration_popup04 b {
    font-size: 20px;
    color:var(--color-red);
}
#registration_popup06 p,
#registration_popup04 p {
    padding: 24px 0;
}
#registration_popup06 .KAIROS_button_box3{padding:0}
#logout_info,
#withdrawal_info,
#mypage0102_popup,
#mypage02_popup,
#my_card_del,
#card_plus_popup {
    text-align: center;
}
#logout_info b,
#withdrawal_info b,
#mypage0102_popup b,
#mypage02_popup b,
#my_card_del b,
#card_plus_popup b {
    font-size: 20px;
    font-weight: 800;
}
#logout_info p,
#withdrawal_info p,
#mypage0102_popup p,
#mypage02_popup p,
#my_card_del p {
    font-size: 14px;
    color: #71727A;
    padding: 8px 0 28px 0;
}
.popup_list_style {
    color:#71727A;
    cursor: pointer;
    max-height: 250px;
    overflow-x: hidden;
    overflow-y: scroll;
}
.popup_list_style li {
    padding: 12px;
    border-radius: 12px;
}
.popup_list_style li:hover,
.popup_list_style li:active,
.popup_list_style li:focus {
    background: #F8F9FE;
    color:#111;
    font-weight: 500;
}
.popup_list_style::-webkit-scrollbar {
    width: 4px;
}
.popup_list_style::-webkit-scrollbar-thumb {
    background: #71727A;
    border-radius: 10px;
}
.popup_list_style::-webkit-scrollbar-thumb:hover {
    background: #71727A;
}

.popup_list_style2 {
    display: flex; /* 가로로 배치 */
    flex-wrap: wrap; /* 가로가 꽉 차면 줄바꿈 */
    gap: 10px; /* 항목 간 간격 */
    padding: 10px; /* 내부 여백 */
    background: #fff;
    max-height: 400px; /* 최대 높이 */
    overflow-y: auto; /* 기본 스크롤 활성화 (스타일 없음) */
    border-radius: 8px; /* 팝업 컨테이너 모서리 */
}

.popup_list_style2 li {
    flex: 1 1 calc(30% - 10px); /* 30% 너비, 간격 제외 */
    padding: 10px;
    text-align: center;
    background-color: #92f3ee;
    border: 1px solid #ddd; /* 각진 네모 테두리 */
    border-radius: 8px; /* 각진 네모 스타일 */
    font-size: 16px;
	font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.popup_list_style2 li:hover,
.popup_list_style2 li:active,
.popup_list_style2 li:focus {
    background: #007bff; /* 선택 시 배경색 */
    color: white; /* 선택 시 텍스트 색상 */
    font-weight: 500;
}
/* .popup_list_style::-webkit-scrollbar {
    display: none;
}
.popup_list_style {
    -ms-overflow-style: none;
    scrollbar-width: none;
} */
.registration_form li {
    position: relative;
}
.registration_form .add_item01,
.registration_form .account_item01,
.registration_form .account_item02 {
    position: relative;
    margin-bottom: 8px;
}
.registration_form p.account_info {
    color:var(--color-main);
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
    margin-bottom: 16px;
    display: none;
}
.registration_form p.account_info.check {
    display: block;
}
.registration_form a.blue_link_style:hover {
    background: #fff;
    color:var(--color-main);
}
.registration_form p.cost_info {
    color:var(--color-red);
    font-weight: 600;
    /* text-align: right; */
    margin-top: 8px;
    font-size: 15px;
    display: none;
}
.registration_form .date_box a {
    display: inline-block;
    background: #F6F6F6;
    color: #111;
    padding: 12px 62px 12px 16px;
    border-radius: 14px;
    margin-right: 16px;
    box-sizing: border-box;
}
.registration_form textarea {
    resize: none;
    width: 100%;
    height: 49px;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 14px 16px;
    box-sizing: border-box;
}
.registration_form .file_info_open {
    color:var(--color-red);
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 5px; /* 왼쪽 마진 추가 */
    right: 0;
    top: 0;
    cursor: pointer;
}

.registration_form .insert {
    display: block;
    box-sizing: border-box;
}
.registration_form .insert input {
    font-size: 0;
    cursor: pointer;
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
}
.registration_form .insert label {
    display: block;
    background: #ffc0cb url(../images/icon_plus.svg) no-repeat;
    background-position: 98% 20px;
    cursor: pointer;
    padding: 14px 16px;
    border-radius: 5px;
    border: 1px solid #eee;
    position: relative;
    margin-bottom: 8px;

}
.registration_form .insert label.file01 {
    display: none;
}
.registration_form .insert .file-list {
    height: auto;
    max-height: 100px;
    overflow-x: scroll;
    display: block;
}
/* ( 크롬, 사파리, 오페라, 엣지 ) 동작 */
.registration_form .insert .file-list::-webkit-scrollbar {
    display: none;
}
.registration_form .insert .file-listl {
    -ms-overflow-style: none; /* 인터넷 익스플로러 */
    scrollbar-width: none; /* 파이어폭스 */
}
.registration_form .insert .file-list.on {
    display: block;
}
.registration_form .insert .file-list .filebox {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.registration_form .insert .file-list .filebox p {
    font-size: 13px;
    color:#333;
    display: inline-block;
}
.registration_form .insert .file-list .filebox .delete {
    border: 1px solid var(--color-red);
    display: inline-block;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border-radius: 2px;

}
.registration_form .insert .file-list .filebox .delete i{
    display: inline-block;
    width: 10px;
    height: 1px;
    background: var(--color-red);
    position: relative;
    top: -8px;
    left: 2px;
}


.scroll_style {
    height: 76vh;
    overflow-y: scroll;
    overflow-x: hidden;
    box-sizing: border-box;
}
.scroll_style::-webkit-scrollbar {
    width: 8px;  
}
.scroll_style::-webkit-scrollbar-thumb {
    background: #7E7E7E;
    border-radius: 10px;
}
.scroll_style::-webkit-scrollbar-track {
    background: #F5F5F5;
}
.mypage {
    display: flex;
    justify-content: center;
}
.mypage_gnb_style {
    margin-top:62px;
}
.mypage_gnb_box {
    /* padding-left: 260px; */
    box-sizing: border-box;
    background: #FAFAFA;
}
.mypage_gnb_box .mypage_gnb_wrap {
    width: 300px;
    border-left: 1px solid #f7f7f7;
    border-right: 1px solid #f7f7f7;
}
.mypage_gnb_box .mypage_gnb_wrap::before {
    content: '';
    display: block;
    width: 40vw;
    height: 100vh;
    max-height: 900px;
    background: #f9f9f9;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.mypage_gnb_style .mypage_gnb_wrap {
    box-sizing: border-box;
    padding: 60px 0 160px 0;
}
.mypage_gnb_style .user_info {
    margin: 16px auto;
    text-align: center;
}
.mypage_gnb_style .user_info .img_box {
    display: inline-block;
    margin-bottom: 20px;
    position: relative;
}
.mypage_gnb_style .user_info .img_box img {
    border-radius: 100%;
    width: 80px;
    height: 80px;
    border: 1px solid #f9f9f9;
}
/* .mypage_gnb_style .user_info .img_box img.edit {
    position: absolute;
    right: 0;
    bottom: 0;
} */
.mypage_gnb_style .user_info b {
    font-weight: 800;
}
.mypage_gnb_style .user_info p {
    font-size: 14px;
    color:#71727A;
    padding-top: 4px;
}
.mypage_gnb_style .mypage_gnb li {
    border-bottom: 1px solid #f7f7f7;
}
.mypage_gnb_style .mypage_gnb li a {
    color:#7C7C7C;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
}
.mypage_gnb_style .mypage_gnb li a:hover {
    background: var(--color-hover);
}
.mypage_gnb_style .mypage_gnb li.on a {
    color:#000;
    font-weight: 600;
}
.mypage_gnb_style .mypage_gnb li.on a .img_box img {
    -webkit-filter: grayscale(100%) brightness(0);
    filter: grayscale(100%) brightness(0);
    opacity: 1;
}
.mypage_gnb_style .mypage_gnb li a .img_box {
    display: flex;
    align-items: center;
}
.mypage_gnb_style .mypage_gnb li a .img_box img {
    opacity: 0.3;
}
.mypage_content {
    width: 800px;
    position: relative;
    box-sizing: border-box;
    padding: 102px 0 20px 0;
    background: #fff;
}
.mypage_content .tab_style2 {
    width: calc(100% - 40px);
    top: 0;
    margin: 0 auto 42px auto;
}
.mypage_content .tab_style .w800 {
    width: 100%;
}
.mypage_title h3 {
    font-size: 20px;
    margin-bottom: 40px;
    padding-left: 40px;
    font-weight: 800;
}
.payment_into_list.scroll_style {
    padding: 0 40px;
    height: auto;
    max-height: 76vh;
}
.payment_into_list li {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    margin-bottom: 16px;
    padding: 16px 24px;
    box-sizing: border-box;
    border-radius: 12px;
}
.payment_into_list .list_none h4 {
    margin-bottom: 20px;
}
.payment_into_list .list_none h4,
.payment_into_list li a h4 {
    font-size: 18px;
    font-weight: 700;
    color: #111;
}
.payment_into_list li a .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.payment_into_list li a .txt_box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.payment_into_list li a .txt_box > div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-right: 20px;
}
.payment_into_list li a .txt_box > div:first-child {
    width: 100%;
    margin: 0;
}
.payment_into_list .list_none p,
.payment_into_list li a p {
    font-size: 14px;
    color: #71727A;
    line-height: 1.8;
}
.payment_into_list li a span {
    color:#000;
}
.payment_into_list li a span.blue_txt {
    color: var(--color-main);
}
.payment_into_list li a span.red_txt {
    color: var(--color-red);
}
.payment_into_list li a span.date {
    font-size: 14px;
}
.mypage_content form {
    padding-left: 40px;
}
.tab_style {
    margin: 0 0 42px 0;
}
.tab_style>ul>li {
    width: calc(100% / 2);
}
.ToS_box,
.Privacy_box {
    padding-left: 40px;
}
.ToS_box.terms,
.Privacy_box.privacy {
    padding: 0 20px;
    margin-top: 40px;
}
.ToS_box dl,
.Privacy_box dl {
    margin-bottom: 16px;
}
.ToS_box dt,
.Privacy_box dt {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 4px;
}
.ToS_box dd,
.Privacy_box dd {
    color:#515151;
}

/*서브공용스타일끝*/

/*로그인*/
.login_box .login_wrap .login_top {
    text-align: center;
}
.login_box .login_wrap .login_top p {
    padding-bottom: 8px;
    color:#9d9d9d;
    font-weight: 600;
}
.login_box .login_wrap .login_top img {
    width: 280px;
}
.login_form {
    margin: 42px 0;
}
.login_form .input_box {
    margin-bottom: 8px;
    position: relative;
}
.login_form .id_pw_Inquiry_go {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--color-main);
    margin: 16px 0 40px 0;
}
.login_box .login_wrap .signup_wrap {
    margin: 40px 0;
}
.login_box .login_wrap .signup_wrap p {
    color:#71727A;
}
.login_box .login_wrap .signup_wrap p a {
    color:var(--color-main);
    font-weight: 700;
}
.login_box .login_wrap .login_sns_wrap {
    border-top: 1px solid #eee;
    padding-top: 40px;
}
.login_box .login_wrap .login_sns_wrap p {
    color:#71727A;
    text-align: center;
}
.login_box .login_wrap .login_sns_wrap ul {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}
.login_box .login_wrap .login_sns_wrap img {
    width: 40px;
}
/*로그인끝*/

/*서브-이용안내*/
.sub_title_wrap {
    text-align: center;
    padding: 200px 0 120px 0;
    border-bottom: 1px solid #E1E1E1;
}
.sub_title_wrap p {
    font-size: 15px;
    color:#71727A   
}
.sub_title_wrap h2 {
    font-size: 52px;
}
.information01_content {
    margin: 160px auto;
}
.information01_content .content .slider {
    background: #F0F7FF;
    border-radius: 50px;
    padding: 60px 80px;
    box-sizing: border-box;
}
.slider .information01_box {
    display: flex;
    justify-content: center;
    gap: 40px;
}
.slider .information01_box .content_box01 {
    position: relative;
}
.slider .information01_box .content_box01 img:nth-child(1) {
    width: 305px;
}
.slider .information01_box .content_box02 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 0;
}
.slider .information01_box .content_box02 .txt_box h3 {
    font-size: 28px;
}  
.slider .information01_box .content_box02 .txt_box h3 span.font-regular {
    font-weight: 500;
}
.slider .information01_box .content_box02 .info_box {
    display: flex;
    gap: 62px;
}
.slider .information01_box .content_box02 .info_box > li {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
    text-align: center;
}
.slider .information01_box .content_box02 .info_box p {
    font-size: 14px;
    color:#777;
    padding-top: 12px;
}
.slider .information01_box .content_box02 .info_box .txt_box {
    /* padding-top: 24px; */
}
.slider .information01_box .content_box02 .info_box li .img_box img {
    width: 220px;
    height: 280px;
    object-fit: cover;
    border-radius: 20px;
}
.custom-dots {
    width: 100%;
    position: absolute;
    top: -100px;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.custom-dots button {
    font-size: 20px;
    color:#A9A9A9;
    font-weight: 700;
}
.custom-dots li.slick-active button {
    color: var(--color-main);
}
.progress {
    display: block;
    width: 100%;
    height: 10px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #f5f5f5;
    background-image: linear-gradient(to right, #006FFD, #006FFD);
    background-repeat: no-repeat;
    background-size: 16% 100%;
    transition: background-size .4s ease-in-out;
    font-size: 0;
    margin-bottom: 40px;
}
.progress .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
.slider .information01_box .content_box01 img.img_hand {
    width: 120px;
    position: absolute;
    right: 30px;
}
.slider .information01_box .content_box01 img.img_hand01 {
    top: 51%;
}
.slider .information01_box .content_box01 img.img_hand02 {
    right: -40px;
    top: 52%;
}
.slider .information01_box .content_box01 img.img_hand03 {
    display: none;
}
.slider .information01_box .content_box01 img.img_hand04 {
    top: 40%;
    right: 20px;
}
.slider .information01_box .content_box01 img.img_hand05 {
    top: 40%;    
}
.slider .information01_box .content_box01 img.img_hand06 {
    right: -20px;
    bottom: 0;
}
/*서브-이용안내끝*/

/*결제요청서*/
.payment_quick_menu img {
    width: 48px;
}
.payment_quick_menu img,
.payment_quick_menu p {
    user-select: none; /* 텍스트 및 이미지 선택 방지 */
}
.payment_quick_menu {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}
.payment_quick_menu {
    max-width: 612px;
    margin: 20px 10px 20px 10px;
    position: relative;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 가벼운 그림자 추가 */
	background: #ffffff;
	padding: 10px;
	border-radius: 10px;
}
@media (min-width: 612px) {
    .payment_quick_menu {
        background-color: transparent; /* 배경색 제거 */
		margin: 20px auto 20px auto;
		box-shadow: none; /* 그림자 제거 */
    }
}
.payment_quick_menu > ul {
    display: flex;
    /* overflow-x: scroll; */
    /* overflow-y: hidden; */
    justify-content: flex-start;
    gap: 40px;
    margin-bottom: 100px;
}
.payment_quick_menu > ul::-webkit-scrollbar {
    display: none;
}
.payment_quick_menu > ul {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.payment_quick_menu > ul a:hover .img_box img {
    animation: bellRing 0.9s both;
}
@keyframes bellRing {
    0%,
    100% {
    transform-origin: top;
    }
    15% {
    transform: rotateZ(10deg);
    }
    30% {
    transform: rotateZ(-10deg);
    }
    45% {
    transform: rotateZ(5deg);
    }
    60% {
    transform: rotateZ(-5deg);
    }
    75% {
    transform: rotateZ(2deg);
}
} 
#scrollable-menu li.swiper-slide a .img_box {
    background: #F6F6F6;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#scrollable-menu li.swiper-slide a p {
    text-align: center;
    color:#333;
    font-weight: 600;
    padding-top: 20px;
}

.payment_request_content .content02 {
    position: relative;
    margin-bottom: 30px;
	border-radius: 12px; /* 완전한 원형 배경 */
	background-color: #fff; /* 배경색 */
	padding: 10px; /* 여백으로 배경 크기 키우기 */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 가벼운 그림자 추가 */
}
.payment_request_content .content02 .payment_new_btn {
    position: absolute;
    right: 0;
    top: -36px;
}

.payment_request_content {
    margin: 10px auto 20px auto;
	padding: 10px;
    max-width: 820px;
}
.payment_request_content .content03 {
    display: block;
}
.payment_request_link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 100px;
}
.payment_request_link li {
    width: calc(100% / 2 - 16px);
    height: auto;
}
.payment_request_link li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 20px;
    background: #EAF2FF;
    border-radius: 12px;
    color:#111;
    font-weight: 700;
    box-sizing: border-box;
    transition: 0.5s;
}
.payment_request_link li a .txt_box span {
    color:#71727A;
    font-size: 14px;
    font-weight: 500;
}
.payment_request_link li a:hover {
    background: #aebdcf;
}
.payment_request_link li a:hover .img_box img {
    animation: bellRing 0.9s both;
}
.payment_request_link li a .icon_box {
    display: flex !important;
    align-items: center;
}
.payment_top_request_link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    border-radius: 20px;
    padding: 8px;
}
.payment_top_request_link li {
    width: calc(100% / 2 - 16px);
    height: auto;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 12px 40px;
    box-sizing: border-box;
}
.payment_top_request_link li:hover {
    background: #F8F9FE;
}
.payment_top_request_link li:hover .img_box img {
    animation: bellRing 0.9s both;
}
.payment_top_request_link li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color:#111;
    font-size: 16px;
    font-weight: 600;
}
.payment_top_request_link li a .icon_box {
    display: flex;
    align-items: center;
}


#offline_popup .offline_info h3 {
    font-size: 16px;
    color:#111;
}
#offline_popup .offline_info p {
    font-size: 14px;
    color:#71727A;
    padding-top: 10px;
}
#offline_popup .offline_info p span {
    color:#000;
    font-weight: 600;
    font-size: 16px;
}
#offline_popup h4 {
    font-size: 18px;
    margin: 28px 0 8px 0; 
}
#offline_popup h4::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 3px;
    background: var(--color-main);
    padding-right: 10px;
    position: relative;
    top: -5px;
    margin-right: 10px;
}
#offline_popup .offline_map {
    width: 100%;
    height: 300px;
}
main .payment_bnr_wrap .payment_bnr {
    position: relative;
    top: 70px;
    opacity: 0;
}
.payment_bnr_wrap {
    background: #d9e7f7;
}
.payment_bnr_wrap .payment_bnr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0;
    box-sizing: border-box;
}
.payment_bnr_wrap .payment_bnr .txt_box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.payment_bnr_wrap .payment_bnr .txt_box .top {
    margin-bottom: 20px;
}
.payment_bnr_wrap .payment_bnr .txt_box h3 {
    color:#3C4658;
    font-size: 36px;
    font-weight: 700;
}
.payment_bnr_wrap .payment_bnr .txt_box h3 img {
    width: 90px;
    position: relative;
    top: 4px;
    line-height: 1;
    margin: 0 4px;
}
.payment_bnr_wrap .payment_bnr .txt_box h3 b{
    font-size: 22px;
    font-weight: 700;
}
.payment_bnr_wrap .payment_bnr .txt_box h3 span {
    font-weight: 500;
    font-size: 20px;
    display: inline-block;
    margin-top: 8px;
}
.payment_bnr_wrap .payment_bnr .txt_box p {
    font-size: 16px;
    line-height: 1.4;
    padding: 20px 0 30px 0;
    color:#414141;
}
.payment_bnr_wrap .payment_bnr .txt_box a {
    color:#111;
    background: #fff;
    display: inline-block;
    padding: 8px 36px;
    border: 1px solid #eee;
    border-radius: 20px;
    font-weight: 600;
    transition: all 0.3s;
}
.payment_bnr_wrap .payment_bnr .txt_box a:hover {
    background: var(--color-main);
    border: 1px solid var(--color-main);
    color:#fff;
}
.payment_bnr_wrap .payment_bnr .txt_box .bottom {
    display: flex;
    flex-direction: column;
    gap:4px;
}
.payment_bnr_wrap .payment_bnr .txt_box .bottom span {
    font-size: 14px;
    color:#656565;
}
.payment_bnr_wrap .payment_bnr .img_box img {
    width: 310px;
}


/*결제요청서끝*/

/*결제하기*/
.payment_choice .choice_list .choice_list_item {
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 16px;
    box-sizing: border-box;
    margin-bottom: 20px;
}
.payment_choice .choice_list .choice_list_item > .hidden {
    display: none;
}
.payment_choice .choice_list .choice_list_item > .hidden.select {
    display: block;
}
.payment_choice .choice_list .choice_title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.payment_choice .choice_list .radio_box {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    margin: 16px 0;
}
.payment_choice .choice_list .radio_box li {
    width: calc(100% / 3 - 12px);
    min-width: 230px;
}
.payment_choice .choice_list .radio_box label span {
    font-size: 13px;
    color:#71727A;
    display: block;
}
.payment_choice .choice_list .choice_date {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 44px;
    border-bottom: 1px solid #eee;
    padding: 20px 0;
    margin-bottom: 20px;
}
h3.payment_choice_title {
    font-size: 17px;
}
.cont-select {
    position: relative;
    width: 140px;
}
.cont-select .btn-select {
    width: 100%;
    padding: 13px 30px 13px 14px;
    background-color: #fff;
    font-size: 16px;
    color:#111;
    box-sizing: border-box;
    cursor: pointer;
    text-align: left;
    background: url(../images/arrow-open.svg) no-repeat right;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.cont-select .list-member {
    display: none;
    background: #fff;
    position: absolute;
    width: 100%;
    top: 49px;
    left: 0;
    border: 1px solid #eee;
    box-sizing: border-box;
    box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    z-index: 9;
}
.cont-select .btn-select.on {
    background: url(../images/arrow-close.svg) no-repeat right;
}
.cont-select .btn-select.on+.list-member {
    display: block;
}
.cont-select .list-member li {
    height: 40px;
    padding: 5px 8px;
    box-sizing: border-box;
}
.cont-select .list-member li button {
    width: 100%;
    padding: 7px 10px;
    border: none;
    background-color: #fff;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    /* white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; */
}
.cont-select .list-member li button:hover,
.cont-select .list-member li button:focus {
    background-color: #DFECFC;
}
.payment_choice .choice_list .choice_date .choice_date_wrap {
    display: flex;
    gap: 16px;
}
.payment_choice .choice_list .choice_alarm {
    display: flex;
    gap: 40px;
    margin-bottom: 32px;
}
.payment_choice .choice_list .choice_alarm .input_wrap {
    display: flex;
    gap: 8px;
}
.payment_choice .choice_list .choice_alarm .input_box {
    display: flex;
}
.payment_choice .choice_list .choice_alarm .input_box input {
    display: none;
}
.payment_choice .choice_list .choice_alarm .input_box label {
    display: block;
    width: 100px;
    height: 42px;
    padding: 12px 20px;
    box-sizing: border-box;
    font-size: 14px;
    color:#555;
    font-weight: 700;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #eee;
    text-align: center;
}
.payment_choice .choice_list .choice_alarm .input_box input:checked+label{
    background: var(--color-main);
    border: 1px solid var(--color-main);
    color:#fff;
}
.payment_choice ~ .KAIROS_button_box {
    margin: 120px 0;
}

.account_number {
    position: relative;
    cursor: pointer;
    display: none;
}
.account_number > img {
    position: absolute;
    right: 8px;
    top: 16px;
}
.account_number #copy-account {
    border: none;
}
.account_number #copy-account:focus {
    border: none !important;
    outline: none !important;
}
.cash_refund {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}
.cash_refund .payment_choice_title span {
    font-size: 14px;
    color:#7a7a7a;
    font-weight: 500;
    display: block;
}
.payment_account_wrap > .wrap {
    display: flex;
    justify-content: space-between;
}
.payment_account_wrap .account_info {
    margin-top: 8px;
    color:var(--color-main);
    font-size: 14px;
    font-weight: 600;
}

/*결제하기끝*/
.payment_finish {
    margin: 250px 0 120px 0;
}
.payment_finish .sub_title_wrap {
    display: none;
}
.payment_finish .finish_title {
    margin-bottom: 100px;
    text-align: center;
}
.payment_finish .finish_title .img_box {
    width: 36px;
    height: 36px;
    margin: 0 auto;
}
.payment_finish .finish_title .img_box img {
    display: block;
    width: 100%;
}
.payment_finish .finish_title h2 {
    margin-top: 20px;
    font-size: 36px;
}
/*송금완료*/
.checkbox-wrapper-19 {
    box-sizing: border-box;
    --background-color: #fff;
    --checkbox-height: 32px;
}
@-moz-keyframes dothabottomcheck-19 {
    0% {height: 0;}
    100% {height: calc(var(--checkbox-height) / 2);}
}
@-webkit-keyframes dothabottomcheck-19 {
    0% {height: 0;}
    100% {height: calc(var(--checkbox-height) / 2);}
}
@keyframes dothabottomcheck-19 {
    0% {height: 0;}
    100% {height: calc(var(--checkbox-height) / 2);}
}
@keyframes dothatopcheck-19 {
    0% {height: 0;}
    50% {height: 0;}
    100% {height: calc(var(--checkbox-height) * 1.2);}
}
@-webkit-keyframes dothatopcheck-19 {
    0% {height: 0;}
    50% {height: 0;}
    100% {height: calc(var(--checkbox-height) * 1.2);}
}
@-moz-keyframes dothatopcheck-19 {
    0% {height: 0;}
    50% {height: 0;}
    100% {height: calc(var(--checkbox-height) * 1.2);}
}
.checkbox-wrapper-19 input[type=checkbox] {
    display: none;
}
.checkbox-wrapper-19 .check-box {
    height: var(--checkbox-height);
    width: var(--checkbox-height);
    background-color: transparent;
    border: calc(var(--checkbox-height) * .1) solid #000;
    border-radius: 5px;
    position: relative;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: border-color ease 0.2s;
    -o-transition: border-color ease 0.2s;
    -webkit-transition: border-color ease 0.2s;
    transition: border-color ease 0.2s;
    cursor: pointer;
}
.checkbox-wrapper-19 .check-box::before,
.checkbox-wrapper-19 .check-box::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    height: 0;
    width: calc(var(--checkbox-height) * .2);
    background-color: var(--color-main);
    display: inline-block;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-radius: 5px;
    content: " ";
    -webkit-transition: opacity ease 0.5;
    -moz-transition: opacity ease 0.5;
    transition: opacity ease 0.5;
}
.checkbox-wrapper-19 .check-box::before {
    top: calc(var(--checkbox-height) * .72);
    left: calc(var(--checkbox-height) * .41);
    box-shadow: 0 0 0 calc(var(--checkbox-height) * .05) var(--background-color);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
.checkbox-wrapper-19 .check-box::after {
    top: calc(var(--checkbox-height) * .37);
    left: calc(var(--checkbox-height) * .02);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box,
.checkbox-wrapper-19 .check-box.checked {
    border-color: #fff;
}
.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::after,
.checkbox-wrapper-19 .check-box.checked::after {
    height: calc(var(--checkbox-height) / 2);
    -moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;
    -o-animation: dothabottomcheck-19 0.2s ease 0s forwards;
    -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;
    animation: dothabottomcheck-19 0.2s ease 0s forwards;
}
.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::before,
.checkbox-wrapper-19 .check-box.checked::before {
    height: calc(var(--checkbox-height) * 1.2);
    -moz-animation: dothatopcheck-19 0.4s ease 0s forwards;
    -o-animation: dothatopcheck-19 0.4s ease 0s forwards;
    -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;
    animation: dothatopcheck-19 0.4s ease 0s forwards;
}
/*송금완료끝*/

/*계약수정*/
.payment_bill_change .KAIROS_button_box3 {
    margin-bottom:120px;
}
/*계약수정끝*/

/*계약등록*/
.registration_content .KAIROS_button_box {
    margin: 120px 0;
}

.registration_content #selectedService {
    color:#333;
    border: none;
    padding: 0;
    font-weight: 700;
    cursor: pointer;
    caret-color: transparent;
    border-radius: 0;
}
.registration_content #selectedService:focus {
    border: none !important;
}
.calendar-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -250px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 28px;
    z-index: 1000;
}
.calendar-popup .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.calendar-popup .header .button_wrap {
    display: flex;
    gap: 24px;
}
.calendar-popup .month-year {
    font-size: 20px;
    font-weight: 700;
    margin-left: 14px;
}
.calendar-popup .days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-top: 10px;
    color:#71727A;
}
.calendar-popup .day-header {
    font-weight: bold;
    text-align: center;
    padding: 14px 0;
}
.calendar-popup #calendarDays {
    display: contents;
}
.calendar-popup .day {
    text-align: center;
    padding: 15px;
    cursor: pointer;
    transition: background 0.3s;
    font-weight: 700;
    font-size: 15px;
    color:#000;
    border-radius: 100%;
}
.calendar-popup .day:hover {
    background-color: #f1f1f1;
}
.calendar-popup .day.selected {
    background-color: var(--color-main);
    color: white;
}
.calendar-popup .selected-date {
    color: var(--color-main);
    cursor: pointer;
}
.calendar-popup .red_star {
    color: red;
}
.calendar-popup .past-date  {
    color: #d5d5d5;
}
.calendar-popup .past-date:hover {
    background: none;
}

/*계약등록끝*/
/*현금영수증*/
.cash_bill_content .radio-buttons2 {
    gap: 24px;
}
.cash_bill_content .radio-buttons2 span {
    font-size: 16px;
    font-weight: 700;
}
.cash_bill_content .input_box {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    margin-top: 20px;
}
.cash_bill_content .input_box .input_wrap {
    width: 100%;
}
.cash_bill_content .KAIROS_button_box3 {
    margin: 120px 0;
}
/*현금영수증끝*/

/*서브-고객센터*/ 
.accordion_container {
    margin-bottom: 100px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 14px;
    padding: 16px 8px;
}
.accordion .accordion-item {
    border-bottom: 1px solid #EEEEEE;
}
.accordion button {
    position: relative;
    display: block;
    text-align: left;
    width: 100%;
    padding: 20px 8px;
    color: #71727A;
    font-size: 18px;
    font-weight: 400;
    border: none;
    background: none;
    outline: none;
}
.accordion button:hover {
    background: var(--color-hover);
}
.accordion button:hover, 
.accordion button:focus {
    cursor: pointer;
    color: #000;
}
.accordion button .accordion-title .accordion-title_q {
    font-weight: 700;
    margin-right: 8px;
}
.accordion button .icon {
    display: inline-block;
    position: absolute;
    top: 18px;
    right: 0;
    width: 22px;
    height: 22px;
    transition: 0.2s;
}
.accordion button .icon .close {
    display: none;
}
.accordion button[aria-expanded='true'] {
    color: #000;
}
.accordion button[aria-expanded='true'] .icon .close {
    display: block;
}
.accordion button[aria-expanded='true'] .icon .open {
    display: none;
}
.accordion button[aria-expanded='true'] + .accordion-content {
    opacity: 1;
    display: block;
    transition: all 200ms linear;
    will-change: opacity, max-height;
}
.accordion .accordion-content {
    opacity: 0;
    display: none;
    overflow: hidden;
    transition: opacity 200ms linear, max-height 200ms linear;
    will-change: opacity, max-height;
}
.accordion .accordion-content p {
    font-size: 16px;
    padding: 20px 8px;
    background: #fdfdfd;
    border-left: 2px solid var(--color-main);
}
 

.customer-service02_box,
.customer-service0201_box,
.customer-service03_box,
.customer-service0301_box {
    margin: 42px 0 160px 0;
}
.board_common_style {
    display: flex;
    flex-direction: column;
}
.board_common_style>li {
    border-bottom: 1px solid #f1f1f1;
}
.board_common_style>li a {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 16px 8px;
    box-sizing: border-box;
}
.board_common_style>li a:hover {
    background: #FBFBFB;
}
.board_common_style>li a h3 {
    font-size: 18px;
    color:#111;
    font-weight: 500;
}
.board_common_style>li a:hover h3 {
    font-weight: 700;
}
.board_common_style>li a p {
    font-size: 14px;
    color:#71727A;
    margin-top: 4px;
}
.board_common_style>li a p span {
    display: inline-block;
    padding: 0 8px;
    color:#eee;
    font-size: 10px;
}
.board_common_style>li a .img_box {
    display: flex;
    justify-content: center;
}
.boardpage_common_style {
    padding: 20px;
}
.boardpage_common_style .title_box {
    border-bottom: 1px solid #eee;
    padding: 16px 8px;
}
.boardpage_common_style .title_box h3 {
    font-size: 18px;
    color:#111;
    font-weight: 500;
}
.boardpage_common_style .title_box p {
    font-size: 14px;
    color:#71727A;
    margin-top: 4px;
}
.boardpage_common_style .title_box p span {
    display: inline-block;
    padding: 0 8px;
    color:#eee;
    font-size: 10px;
}
.boardpage_common_style .content_box {
    padding: 16px 8px;
}
.boardpage_common_style button.back_btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition-duration: .3s;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
    background-color: var(--color-main);
    margin-top: 42px;
}
.boardpage_common_style button.back_btn .sign {
    width: 100%;
    transition-duration: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.boardpage_common_style button.back_btn .text {
    position: absolute;
    right: 0%;
    width: 0%;
    opacity: 0;
    color: white;
    font-size: 1.2em;
    font-weight: 600;
    transition-duration: .3s;
}
.boardpage_common_style button.back_btn.mob,
.boardpage_common_style button.back_btn:hover {
    width: 125px;
    border-radius: 40px;
    transition-duration: .3s;
}
.boardpage_common_style button.back_btn.mob .sign,
.boardpage_common_style button.back_btn:hover .sign {
    width: 30%;
    transition-duration: .3s;
    padding-left: 10px;
}
.boardpage_common_style button.back_btn.mob .text,
.boardpage_common_style button.back_btn:hover .text {
    opacity: 1;
    width: 80%;
    transition-duration: .3s;
}
.boardpage_common_style button.back_btn.mob,
.boardpage_common_style button.back_btn:active {
    transform: translate(2px ,2px);
}
/*서브-고객센터끝*/

/*카드사무이자안내*/
.cardevent_box .info_box {
    background: #eef3f7;
    border: 1px solid #dbeeff;
    padding: 8px;
    box-sizing: border-box;
    margin-bottom: 40px;
}
.cardevent_box .cardevent_info {
    font-size: 14px;
    color:#71727A;
}
.cardevent_box ul li {
    display: flex;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: 16px;
}
.cardevent_box ul li:last-child {
    border-bottom: 1px solid #eee;
}
.cardevent_box ul li .card_wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1px solid #eee;
}
.cardevent_box ul li .card_wrap img {
    width: 20px;
}
.cardevent_box ul li .card_wrap h4 {
    color:#333;
    font-size: 15px;
    font-weight: 600;
}
.cardevent_box ul li .month_wrap {
    display: flex;
    justify-content: space-between;
}
.cardevent_box ul li .month_wrap p {
    font-weight: 700;
    margin-right: 20px;
}
.cardevent_box ul li .month_wrap p.left_border {
    border-left: 1px solid #eee;
    padding-left: 20px;
}


/*카드사무이자안내끝*/

/*회원가입완료*/
.signup_i04 {
    text-align: center;
}
.signup_i04 .img_box {
    margin: 50px auto;
}
.signup_i04 .img_box img {
    width: 170px;
}
/*회원가입완료끝*/

/*footer*/
footer {
    color: var(--color-gray) !important;
    font-size: 14px;
    font-weight: 400;
    background: #111;
    padding: 40px 0;
}
footer img {
    width: 130px;
    -webkit-filter: brightness(0) invert(1); 
    filter: brightness(0) invert(1);
}
footer .footer {
    margin-top: 40px;
}
footer .footer >li {
    margin-bottom: 8px;
}
footer .footer> li a {
    color: var(--color-gray) !important;
}
footer .footer> li span {
    font-weight: 900;
}
footer .footer-box {
    display: flex;
    gap:8px;
}


/*나의 결제수단*/
.my_card_list > p {
    color:#333;
    font-weight: 700;
}
.my_card_list .radio_box {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    margin: 20px 0 60px 0;
}
.my_card_list .radio_box::-webkit-scrollbar {
    /* width: 4px;   */
    display: none;
    height: 8px;
}
.my_card_list .radio_box::-webkit-scrollbar-thumb {
    background: var(--color-main);
    border-radius: 4px; 
}
.my_card_list .radio_box::-webkit-scrollbar-track {
    background: #fff;
}
.my_card_list .radio_box li {
    min-width: 250px;
}
.my_card_list .radio_box span {
    display: block;
    font-size: 14px;
    color:#71727A;
}
.input_container {
    display: flex;
    gap: 20px;
    align-items: center;
    border: 1px solid #eee;
    padding: 14px 16px;
    width: 100%;
    border-radius: 12px;
    box-sizing: border-box;
}
.input_container input {
    border: none;
    border-radius: 0;
    padding: 0;

}
.input_container input:focus {
    outline: none;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

#my_card_del .title img {
    position: relative;
    top: 6px;
    left: -4px;
}
#my_card_del .my_card_del_close {
    font-size: 16px;
    color:#515151;
    border: 1px solid #eee;
}
#my_card_del .my_card_del_close:hover {
    background: #efefef;
}
.card_plus_wrap {
    display: none;
}
#card_plus_popup .card_plus_close {
    background: var(--color-main);
    width: 160px;
    border-radius: 12px;
    padding: 14px 16px;
    box-sizing: border-box;
    transition: 0.3s;
}
#card_plus_popup b {
    display: block;
    margin-bottom: 30px;
    font-size: 18px;
}
#card_plus_popup .title {
    margin-top: 20px;
}
#card_plus_popup .card_plus_close span {
    color:#fff;
    font-size: 16px;
}
/*나의 결제수단끝*/


/*버튼스타일추가*/
.registration_new {
    display: flex;
    align-items: center;
    gap: 24px;
}
.new_btn_style_box {
    display: flex;
    gap: 12px;
}
.new_btn_style1 {
    background: var(--color-main);
    width: 36px;
    height: 36px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
}
.new_btn_style2 {
    background: #A1A1A1;
    width: 36px;
    height: 36px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
}
.new_btn_style1:hover {
    background: #A1A1A1;
    transform: scale(1.1);
}
.new_btn_style2:hover {
    background: var(--color-main);
    transform: scale(1.1);
}
.new_btn_style1 .Tooltip,
.new_btn_style2 .Tooltip {
    position: absolute;
    top: 38px;
    display: none;
    background: #333;
    color:#fff;
    font-size: 14px;
    padding: 4px 8px;
    box-sizing: border-box;
    border-radius: 4px;
}
.new_btn_style1:hover .Tooltip,
.new_btn_style2:hover .Tooltip {
    display: inline-block;
}




.jconfirm .jconfirm-holder {
    width: 50%;
    transform: translate(50%, 0px);
}

 .category_list {
    font-size: 14px; /* 원하는 크기로 설정 */
	margin-left: 12px; /* 왼쪽 마진 설정 */
}

.pagination {
    padding: 0 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.pagination li.prev,
.pagination li.next {
    padding: 0 8px;
    margin: 0 8px;
}
.pagination li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 4px 12px;
    border-radius: 100%;
    color:#cdcdcd;
    font-weight: 600;
    box-sizing: border-box;
}
.pagination li:hover a,
.pagination li.active a {
    background: #f3f2f2;
    color:#111;
}
.pagination li:hover a svg path{
    stroke:#111;
}


.customer-service01_content,
.customer-service02_box,
.customer-service03_box {
    min-height: 500px;
}
.login_wrap {
    min-height: 800px;
}


.service01_category ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 42px;
}
.service01_category ul li a {
    display: block;
    padding: 8px 12px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 24px;
    color:#787878;
    font-weight: 600;
}
.service01_category ul li.on a {
    background: #d4e7ff;
    border: 1px solid var(--color-main);
    color:var(--color-main);
}

/* 
main .payment_quick_menu {
    width: 1320px;
    padding: 6.5vw 20px 0 20px;
    margin: 0 auto;
    box-sizing: border-box;
    top: 120px;
} */

#scrollable-menu li.swiper-slide a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color:#121212;
    gap: 8px;
}


.bill_info_text {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 12px;
    padding: 40px;
    box-sizing: border-box;
    margin: 50px 0;
    position: relative;
}
.bill_info_text b {
    color:var(--color-red);
    font-size: 18px;
}
.bill_info_text p {
    padding-top: 12px;
}


footer .footer_btn {
    display: flex;
    gap: 24px;
    position: absolute;
    top: 0;
    right: 0;
}
footer .footer_btn a {
    color:#cacaca;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    border: 0.5px solid #cacaca;
    padding: 8px 16px;
    box-sizing: border-box;
}
footer .footer_btn a:hover {
    background: #777;
}


.bill_none {
    text-align: center;
    background: #f1f1f1;
    padding: 30px 0;
    box-sizing: border-box;
    border-radius: 8px;
}

#registration_info_popup .icon_box {
    background: var(--color-main);
    width: 24px;
    height: 24px;
    border-radius: 100%;
    display: inline-block;
    text-align: center;
    line-height: 27px;
    cursor: pointer;
}

.dgdiv{display: none;}
.backbtn{border: 1px solid #d9d9d9; color:#d9d9d9}
.backbtn:hover{color:#9d9d9d; border: 1px solid #9d9d9d;}

#file-upload-section {
    margin-top: 20px;
}

.insert-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

#essential-fields, #additional-fields {
    margin-bottom: 20px;
}

.vlftntjfb, .cnrktjfb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #ffffff; /* 흰색 배경 */
    border: 1px solid #ccc; /* 테두리 */
    border-radius: 5px; /* 모서리 둥글기 */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* 살짝 그림자 */
}

.file-name {
    flex: 1; /* 이름 영역 확장 */
    text-align: center; /* 중앙 정렬 */
    font-size: 14px;
    color: #333; /* 글씨 색상 */
    overflow: hidden; /* 파일명 넘침 방지 */
    text-overflow: ellipsis; /* 길면 "..." 처리 */
    white-space: nowrap;
}

.delete-btn {
    background-color: #dc3545; /* 삭제 버튼 색상 */
    color: #fff; /* 글씨 색상 */
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    margin-left: 10px; /* 파일명과 간격 */
}

.delete-btn:hover {
    background-color: #a71d2a; /* 삭제 버튼 hover 색상 */
}

.add-btn {
    background-color: #007bff; /* 추가 버튼 색상 */
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    display: block;
    text-align: center;
    margin: 20px auto; /* 가운데 정렬 */
}

.add-btn:disabled {
    background-color: #cccccc; /* 비활성화 버튼 색상 */
    cursor: not-allowed;
}
.service_notice {
    font-size: 15px; /* 글자 크기 */
    color: #FF0000; /* 회색 */
    margin-top: 5px; /* 상단 여백 */
}

.category-grid {
    display: flex;
  justify-content: center; /* 양쪽 정렬 */
    flex-wrap: wrap; /* 두 줄 이상 표시 */
    gap: 20px; /* 항목 간 간격 */
    width: 100%;
    max-width: 800px; /* 최대 너비 조정 */
    margin: 20px auto; /* 위/아래 여백 추가 */
}

.category-list {
    display: flex;
    flex-wrap: wrap; /* 여러 줄로 감싸기 */
    list-style: none; /* 기본 목록 스타일 제거 */
    padding: 0;
    margin: 0;
    justify-content: flex-start; /* 왼쪽 정렬 */
    gap: 15px; /* 항목 간 간격 */
  margin-left: 10px; /* 왼쪽 마진 추가 */
}


.category-item {
    flex: 0 0 calc(20% - 15px); /* 한 줄에 5개 배치 */
    max-width: calc(20% - 15px); /* 최대 너비 설정 */
    text-align: center;
	margin-bottom: 15px; /* 아래 여백 추가 */
	
}

.category-item img {
    width: 30px; /* 아이콘 크기 */
    height: 30px; /* 정사각형 유지 */
    margin-bottom: 8px; /* 아이콘과 텍스트 간격 */
    border-radius: 50%; /* 완전한 원형 배경 */
    background-color: #fff; /* 배경색 */
    padding: 10px; /* 여백으로 배경 크기 키우기 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 가벼운 그림자 추가 */
}

/* PC 화면에서 아이콘 크기 조정 */
@media (min-width: 1024px) {
    .category-item img {
        width: 50px; /* PC에서 아이콘 크기 */
        height: 50px; /* 정사각형 유지 */
        padding: 15px; /* 더 넉넉한 여백 */
    }
}

.category-item p {
    font-size: 10px; /* 글씨 크기 */
    font-weight: normal; /* 굵은 글씨 제거 */
    color: #555; /* 텍스트 색상 약간 연하게 */
    margin: 5px 0 0 0; /* 텍스트와 아이콘 간격 조정 */
    line-height: 1.4; /* 텍스트 간격 */
    text-align: center;
    white-space: normal; /* 줄바꿈 허용 */
    word-wrap: break-word; /* 긴 단어가 박스를 넘지 않도록 줄바꿈 */
    overflow: hidden; /* 넘치는 내용 숨김 */
    display: -webkit-box; /* 브라우저 호환성 추가 */
    -webkit-box-orient: vertical; /* 텍스트 세로 배치 */
    -webkit-line-clamp: 2; /* 최대 2줄로 제한 */
}

@media (min-width: 1024px) {
    .category-item p {
        font-size: 14px; /* PC에서 글씨 크기 */
        line-height: 1.6; /* PC에서 간격 조정 */
    }
}

.more-button-wrapper {
    display: flex;
    justify-content: center; /* 가운데 정렬 */
    margin-top: 20px; /* 위쪽 여백 */
	
}

.more-button {
    padding: 5px 20px;
    font-size: 14px;
    font-weight: bold;
}

.paymentdiv {
	display: flex; /* Flexbox 활성화 */
    justify-content: center; /* 수평 가운데 정렬 */
    align-items: center; /* 수직 가운데 정렬 */
    margin: 10px;
}
.payment_new_btn2 {
	width: 100%; /* 가로로 꽉 채움 */
    background-color: #92f3ee; /* 파란색 배경 */
    color: #333; /* 흰색 텍스트 */
    border: none; /* 테두리 제거 */
    border-radius: 10px; /* 라운드 모서리 */
    padding: 15px 20px; /* 여백 추가 */
    font-size: 16px; /* 글씨 크기 */
    font-weight: bold; /* 글씨 두껍게 */
    cursor: pointer; /* 마우스 커서를 포인터로 */
    display: inline-flex; /* 버튼 내부 내용 정렬 */
    align-items: center; /* 수직 가운데 정렬 */
    justify-content: center; /* 수평 가운데 정렬 */
    gap: 8px; /* 아이콘과 텍스트 간격 */
    transition: background-color 0.3s ease; /* 호버 시 배경색 전환 애니메이션 */
	margin: 10px 0px 20px 0px;
}

.payment_new_btn2:hover {
    background-color: #0056b3; /* 호버 시 더 짙은 파란색 */
}

.payment_new_btn2 img {
    transition: 0.8s;
}
.payment_new_btn2:hover .text {
    color:#000;
}
.payment_new_btn2:hover img {
    -webkit-filter: grayscale(100%) brightness(0);
    filter: grayscale(100%) brightness(0);
    transform: rotate(180deg);
}

.menu_container {
    display: flex;
    justify-content: center; /* 내부 콘텐츠 가운데 정렬 */
    align-items: center; /* 세로축 가운데 정렬 */
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 20px; /* 내부 여백 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 20px auto 20px auto; /* 기본적으로 가운데 정렬 */
    max-width: 780px; /* 최대 너비 설정 */
}

/* 모바일 화면을 위한 스타일 */
@media screen and (max-width: 870px) {
    .menu_container {
        margin: 10px 10px 10px 10px; /* 모바일에서는 좌우 10px 마진 추가 */
    }
}

	
	
.menu_container2 {
	display: flex;
    justify-content: center; /* 내부 콘텐츠 가운데 정렬 */
    align-items: center; /* 수직 가운데 정렬 */
    background-color: #FFFFFF; /* 배경색 */
    border-radius: 12px; /* 둥근 모서리 */
    padding: 20px; /* 내부 여백 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 */
	margin: 20px auto 20px auto; /* 기본적으로 가운데 정렬 */
	max-width: 800px; /* 최대 폭 제한 */
}
@media screen and (max-width: 870px) {
    .menu_container2 {
        margin: 20px 10px 20px 10px; /* 모바일에서는 좌우 10px 마진 추가 */
    }
}

.menu_link {
    text-decoration: none; /* 링크 밑줄 제거 */
    flex: 1; /* 각 항목이 동일한 크기 */
}

.menu_item {
    display: flex; /* 아이콘과 텍스트를 가로로 배치 */
    flex-direction: column; /* 수직 정렬 */
    align-items: center; /* 가운데 정렬 */
    justify-content: center; /* 수직 가운데 정렬 */
    text-align: center; /* 텍스트 가운데 정렬 */
    flex: 1; /* 동일한 크기 배분 */
    font-size: 14px; /* 텍스트 크기 */
    font-weight: bold; /* 텍스트 굵게 */
    color: #333; /* 기본 텍스트 색상 */
    cursor: pointer; /* 클릭 가능한 커서 */
    gap: 8px; /* 아이콘과 텍스트 간격 */
    transition: all 0.3s ease; /* 부드러운 전환 효과 */
}
.menu_item:hover {
    color: #007BFF; /* 텍스트 색상 변경 */
    transform: scale(1.05); /* 약간 확대 효과 */
}

.menu_item img {
    width: 24px; /* 아이콘 크기 */
    height: 24px; /* 아이콘 크기 */
}
.menu_item:hover img {
    transform: scale(1.2); /* 아이콘 확대 효과 */
}
.menu_separator {
    width: 1px; /* 구분선 두께 */
    height: 60px; /* 구분선 높이 */
    background-color: #f5f5f5; /* 구분선 색상 */
    margin: 0 10px; /* 좌우 여백 */
}
.single_menu_item {
    display: flex; /* 아이콘과 텍스트를 가로로 배치 */
    align-items: left; /* 가운데 정렬 */
    text-align: left; /* 텍스트 가운데 정렬 */
    flex: 1; /* 동일한 크기 배분 */
    font-size: 14px; /* 텍스트 크기 */
    font-weight: bold; /* 텍스트 굵게 */
    color: #333; /* 기본 텍스트 색상 */
    cursor: pointer; /* 클릭 가능한 커서 */
    gap: 20px; /* 아이콘과 텍스트 간격 */
    transition: all 0.3s ease; /* 부드러운 전환 효과 */
}

/* 팝업 배경 */
.popup_hidden {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
    z-index: 1000;
}

/* 팝업 컨텐츠 */
.popup_content {
	position: relative;
    margin: auto;
    top: 50%;
    transform: translate(0%, -50%); /* 화면 중앙 정렬 */
    padding: 20px;
    width: 70%; /* 반응형: 기본 90% */
    max-width: 400px; /* 최대 너비 */
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
}
/* 팝업 컨텐츠 */
.popup_content2 {
	position: relative;
    margin: auto;
    transform: translate(0%, -50%); /* 화면 중앙 정렬 */
    padding: 20px;
    width: 70%; /* 반응형: 기본 90% */
    max-width: 400px; /* 최대 너비 */
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
}
/* 제목 스타일 */
.popup_content2 strong {
    display: block;
    font-size: 16px ;
    margin-top: 10px;
    margin-bottom: 5px;
    text-align: center;
	color: #666
}

/* 내용 스타일 */
.popup_content2 .category_list {
    font-size: 14px;
    line-height: 1.5;
    margin: 10px 0;
}

/* 닫기 버튼 위치 조정 */
.popup_close {
    position: absolute;
    top: -25px;
    right: 0;
    cursor: pointer;
	color: white;

}
/* 닫기 버튼 */
.compare_popup_close {
   position:absolute;
   top:-25px;
   right: 0;
   cursor:pointer;
}

.popup_content {
    padding: 20px;
    font-family: 'Arial', sans-serif;
    text-align: center;
    color: #333;
}

/* 강조 박스 스타일 */
.modal_highlight {
    background: #007BFF;
    color: #fff;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.modal_highlight span {
    color: #FFD700; 
    font-size: 16px;
}
.modal_highlight strong {
    font-size: 16px;
}

.modal_highlight span {
    display: block;
}

/* 테이블 스타일 */
.compare_table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size: 12px;
}

.compare_table th {
    background: #F1F3F5;
    padding: 8px;
    font-weight: bold;
    color: #555;
    border-bottom: 1px solid #ddd;
}

.compare_table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.compare_table .highlight_row {
    background: #EAF6FF;
    font-weight: bold;
    color: #007BFF;
}
.red_notice {
    color: red;
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    margin-top: 5px;
}
.blue_notice {
    color: blue;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    margin-top: 5px;
}
/* 홍보 박스 전체 스타일 */
.promo-box {
    background-color: #f9f9f9; /* 배경색 흰색 */
    width: 100%; /* 가로 폭 전체 */
    height: 100vh; /* 화면 높이 100%로 꽉 채움 */
    display: flex;
    flex-direction: column; /* 내용을 세로 방향으로 배치 */
    justify-content: center; /* 수직 중앙정렬 */
    align-items: center; /* 수평 중앙정렬 */
}

.promo-box img {
	display: block;:
	margin-top: 30px;
	margin-bottom: 10px;
    max-width: 50%; /* 이미지가 부모 요소의 너비를 초과하지 않도록 함 */
    height: auto; /* 가로세로 비율 유지 */
    object-fit: contain; /* 이미지 비율을 깨지 않고 내용 표시 */
}
/* 타이틀 스타일 */
.promo-title {
    color: #333333; /* 진한 회색 */
    font-size: 22px; /* 글자 크기 */
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 1.4;
}
/* 사용후기 둥근 박스 */
.rounded-box {
    display: inline-block;
    padding: 5px 20px 5px 20px;
    color: #7a6ff0;
    border: 1px solid #c3bdf1;
    border-radius: 20px;
}

/* 구분선 스타일 */
.line {
    width: 80%;
    margin: 15px auto;
    border-bottom: 1px solid #ddd;
}

/* 타이틀 스타일 */
.promo-title strong {
    font-size: 25px;
    font-weight: bold;
    color: #666;
    margin-bottom: 10px;
    display: block;
}
.subtitle {
    font-size: 16px;
    color: #777;
}
.promo-title sub {
    font-size: 25px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    display: block;
}
/* 카드 이미지 */
.card-image {
        max-width: 50%;
    height: auto;
    margin: 15px auto;
}


/* 설명 텍스트 */
.promo-desc {
    color: #666666; /* 중간 회색 */
    font-size: 1rem;
    margin-bottom: 20px;
}
.selected-category {
    font-size: 28px; /* 카테고리 글씨 크기 */
    font-weight: bold; /* 굵게 표시 */
    color: #333; /* 진한 글씨색 */
}
/* 버튼 스타일 */
/* 버튼 스타일 */
.promo-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #7a6ff0;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 25px;
    text-decoration: none;
    margin-top: 15px;
    transition: background 0.3s;
}
/* 버튼 호버 효과 */
.promo-btn:hover {
    background-color: #0088cc;
    text-decoration: none;
    color: #ffffff;
}

.promo-reviews {
    text-align: center;
      margin-top: 10px;
}

.review-slider {
    position: relative;
	    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 5px 0;
    height: 60px; /* 리뷰 텍스트 높이 */
    overflow: hidden; /* 슬라이더 영역 밖 숨기기 */
}

.review {
    position: absolute;
	font-size: 16px;
	font-style: oblique 20deg; /* 각도를 20도 정도로 조정 */
    width: 80%;
    opacity: 0; /* 기본 숨김 */
    animation: slideReviews 9s infinite; /* 3초 간격으로 순환 */
	left: 10%;
}

/* 각 리뷰에 순차적 애니메이션 적용 */
.review:nth-child(1) {
    animation-delay: 0s;
}
.review:nth-child(2) {
    animation-delay: 3s;
}
.review:nth-child(3) {
    animation-delay: 6s;
}

/* 애니메이션 키프레임 */
@keyframes slideReviews {
    0% { opacity: 0; transform: translateY(100%); }
    10% { opacity: 1; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(0); }
    40% { opacity: 0; transform: translateY(-100%); }
    100% { opacity: 0; transform: translateY(-100%); }
}

.promo-docs {
    margin-top: 20px;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    text-align: left;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.promo-docs h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

.docs-list {
    list-style-type: disc;
    padding-left: 20px;
}

.docs-list li {
    font-size: 16px;
    margin-bottom: 5px;
}

.btn-link {
    color: #00aaff;
    text-decoration: none;
    font-weight: bold;
}

.btn-link:hover {
    text-decoration: underline;
}

/* 첨부서류 안내 링크 스타일 */
.attachment-link {
    display: inline-block;
    margin-top: 30px;
    color: #7a6ff0;
    text-decoration: underline;
    font-size: 14px;
    cursor: pointer;
}
.category-description {
    font-size: 13px;
    margin: 10px auto 20px auto;
    color: #666;
    text-align: center;
    width: 90%;

}
.point_area {
   margin: 5px 0;
    display: flex;
    align-items: center;
    gap: 10px;

}

.point_use_text {
	margin: 5px;
	font-size: 15px;
    font-weight: bold;
    color: #0066cc;
    cursor: pointer;
}

.current_point {
    color: #666;
}

.point_detail {
   padding: 15px;
   background: #f8f9fa;
   border-radius: 5px;
   margin: 10px 0;
}

.point_info {
   font-size: 14px;
   color: #666;
}

.point_guide {
   display: inline;
   margin-left: 10px;
}
.point_row {
   margin-top: 15px;
}

.point_input {
   margin-top: 10px;
}

.point_input input {
   width: 100%;
   padding: 8px;
   border: 1px solid #ddd;
   border-radius: 4px;
}.point_history_wrap {
    padding: 20px;
}

.point_history_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.history_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.history_info .reason {
    font-size: 16px;
    margin-bottom: 5px;
}

.history_info .date {
    font-size: 14px;
    color: #666;
}

.point_amount {
    font-size: 18px;
    font-weight: bold;
}

.point_amount.plus {
    color: #2196F3;
}

.point_amount.minus {
    color: #F44336;
}

.pagination {
    margin-top: 20px;
    text-align: center;
}

.pagination a {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 4px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
}

.pagination a.active {
    background-color: #2196F3;
    color: white;
    border-color: #2196F3;
}

.no_history {
    text-align: center;
    padding: 50px 0;
    color: #666;
}
.total_points_wrap {
    background: #f5f5f5;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    text-align: center;
}

.total_points_wrap h4 {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
}

.total_points {
    font-size: 24px;
    font-weight: bold;
    color: #2196F3;
}
.ref_code_wrap {
    background: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #e0e0e0;
}

.ref_code_wrap h4 {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
}

.ref_code {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    letter-spacing: 2px;
}