@charset "utf-8";

/* 컨텐츠 공통 wrap */
.content_area {
  padding-bottom: 60px;
  min-height: 400px;
}

.content_area.type_bottom {
  /* 하단 플로팅 버튼 들어가는 페이지에 필요한 class
	헤더가 없는데 바텀 플로팅 버튼이 있는 탈퇴 완료, 앱필수업데이트와 padding-bottom 값 같게 해야 함 */
  padding-bottom: 140px;
}

.content_area.type_notice {
  margin: 0 -4px 0 -4px;
  padding-top: 68px;
}

.content_area.type_card {
  margin: 0 -4px;
}

/* 하늘색 박스 - 약관, 유의사항 */
.box_blue {
  margin: 0 -24px;
  padding: 30px 24px;
  background-color: var(--gray100);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.26px;
  line-height: 20px;
}

.type_terms .box_blue {
  padding: 24px;
}

.box_blue p,
.box_blue p a {
  color: var(--gray700);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.26px;
  line-height: 17px;
}

.box_blue strong {
  font-weight: 600;
}

.box_blue .list_dot+.grid_column {
  margin-top: 24px;
}

.box_blue .list_dot+.arrow_link {
  margin-top: 36px;
}

.box_blue .terms_title_sub2 {
  padding-top: 0;
}

/**************************************************************
	고객센터 - 파일 업로드
******************************************************************/
/* 251031 수정 */
.content_area.fileupload {
  height: calc(100vh - 92px);
}

.fileupload_container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.fileupload_container .fileupload_title {
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.44px;
}

.fileupload_container .wrap_agreement_option {
  padding-top: 36px;
}

.fileupload_container .register {
  margin-top: 36px;
}

.fileupload_container .fileupload_description {
  color: var(--gray700);
  padding-top: 14px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.28px;
}

.fileupload_container .data_contents {
  padding-top: 26px;
}

.fileupload_container .data_item {
  margin-bottom: 24px;
  background: var(--gray100);
}

.fileupload_container .data_item_panel {
  padding: 24px;
}

.fileupload_container .data_item_panel strong {
  display: block;
  padding-top: 20px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.24px;
}

.fileupload_container .data_item_panel p {
  padding-top: 8px;
  color: var(--secondary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
}

.fileupload_container .data_item_panel .data_item_tit {
  padding-bottom: 20px;
  color: var(--primary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
  border-bottom: solid 1px var(--gray200);
}

.fileupload_container .data_item_panel p+.list_dot {
  margin-top: 8px;
}

.fileupload_container .data_item_panel .list_num+.list_dot {
  margin-top: 4px;
}

.fileupload_container .data_item_panel .list_tit {
  margin-top: 8px;
  margin-bottom: 4px;
}

.fileupload_container .fileupload_box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding-top: 30px;
}

.fileupload_container .fileupload_box .count_wrap .count {
  display: flex;
  align-items: center;
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
}

.fileupload_container .fileupload_box .count_wrap .count .current {
  color: var(--gray400);
}

.fileupload_container .fileupload_box .count_wrap .count .current.full {
  color: var(--primary);
}

.fileupload_container .fileupload_box .count_wrap .count .current:after {
  content: '';
  display: inline-block;
  margin: 0 6px;
  width: 1px;
  height: 10px;
  background-color: var(--gray400);
}

.fileupload_container .fileupload_box .count_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fileupload_container .fileupload_box .count_wrap .btn_delete_all {
  display: flex;
  align-items: center;
  color: var(--gray400);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
}

.fileupload_container .fileupload_box .count_wrap .btn_delete_all.active {
  color: var(--primary);
  fill: var(--primary)
}

.fileupload_container .fileupload_box .count_wrap .btn_delete_all:after {
  content: '';
  display: block;
  margin-left: 4px;
  margin-top: -2px;
  ;
  width: 16px;
  height: 16px;
  background: url('../images/svg/btn_fileupload_delete.svg') no-repeat 0 0;
}

.fileupload_container .fileupload_box .count_wrap .btn_delete_all.active:after {
  background: url('../images/svg/btn_fileupload_delete_active.svg') no-repeat 0 0;
}

.fileupload_container .fileupload_box .fileupload {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 0 70px;
}

.fileupload_container .fileupload_box .fileupload .btn_fileupload {
  width: 90px;
  height: 90px;
  background: url('../images/svg/btn_fileupload.svg') no-repeat 0 0;
}

.fileupload_container .fileupload_box .fileupload .message {
  padding-top: 13px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: -0.26px;
}

.fileupload_container .fileupload_box .message_box {
  padding: 24px;
  margin-top: auto;
  background-color: var(--gray100);
  color: var(--primary);
  font-size: 13px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: -0.26px;
}

/* 썸네일 그리드 스타일 */
.fileupload_container .thumbnail_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 11px;
  row-gap: 40px;
  margin-top: 20px;
  padding-bottom: 80px;
}

/* 5개 파일일 때 마지막 아이템을 좌측 정렬 */
.fileupload_container .thumbnail_grid .thumbnail_item:nth-child(5) {
  grid-column: 1;
}

.fileupload_container .thumbnail_item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fileupload_container .thumbnail_preview {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: var(--gray100);
  border: 1px solid var(--gray200);
  width: 100%;
  height: 162px;
  padding: 14px;
  overflow: hidden;
}

.fileupload_container .thumbnail_preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.fileupload_container .thumbnail_info {
  padding: 16px 4px 0;
}

.fileupload_container .thumbnail_info .filename {
  margin: 0 0 8px 0;
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fileupload_container .thumbnail_actions {
  display: inline-flex;
  gap: 6px;
}

.fileupload_container .thumbnail_actions .btn_change,
.fileupload_container .thumbnail_actions .btn_delete {
  flex: 1;
  padding: 0 12px;
  height: 33px;
  border: 1px solid var(--gray300);
  border-radius: 2px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: -0.26px;
  cursor: pointer;
}

/* //251031 수정 */

/**************************************************************
	고객센터 - 자주 묻는 질문 - tab
******************************************************************/
.option_search {
  position: relative;
  margin: 0 -4px;
}

.category_list {
  overflow: hidden;
  position: relative;
  margin: 36px -4px 0;
  white-space: nowrap;
}

.category_list.on {
  padding-right: 43px;
}

.category_list .view_arrow {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  /* background-color: var(--primary); */
}

.category_list .view_arrow:before {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  width: 132px;
  height: 41px;
  background: url('../images/svg/bg_tab_shadow.svg') no-repeat 0 0;
  content: '';
}

.category_list .view_arrow:after {
  display: block;
  content: '';
  position: absolute;
  width: 36px;
  height: 36px;
  background-color: var(--primary);
  z-index: 1;
}

.category_list.on .view_arrow:before {
  display: none;
}

.category_list .arrow_open {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  width: 16px;
  height: 16px;
  padding: 18px;
  background: url('../images/svg/arrow_up_white.svg') no-repeat 10px 10px;
  transform: rotate(180deg);
  transition: 0.5s ease;
}

.category_list.on .view_arrow .arrow_open {
  transform: rotate(0);
  transition: 0.5s ease;
}

.category_list .wrap_tabs {
  flex-wrap: nowrap;
}

.category_list.on .wrap_tabs {
  flex-wrap: wrap;
}

.wrap_tabs {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.wrap_tabs.type_capsule {
  gap: 6px;
}

.wrap_tabs.type_capsule li a,
.wrap_tabs.type_capsule li button {
  display: inline-flex;
  align-items: center;
  height: 41px;
  padding: 12px 16px;
  background-color: var(--white);
  border: 1px solid var(--gray300);
  color: var(--gray700);
  font-size: 13px;
  font-weight: 400;
  line-height: 17px;
  border-radius: 100px;
}

.wrap_tabs.type_capsule li a>b,
.wrap_tabs.type_capsule li button>b {
  margin-left: 10px;
  color: var(--secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 17px;
}

.wrap_tabs.type_capsule li.on a,
.wrap_tabs.type_capsule li.on button {
  font-weight: 500;
  color: var(--white);
  background-color: var(--primary);
  border-color: var(--primary);
}

.wrap_tabs.type_capsule li.on a>b,
.wrap_tabs.type_capsule li.on button>b {
  color: var(--blue600);
  font-weight: 600;
}

/**************************************************************
	고객센터 - 자주 묻는 질문 - hashtag
******************************************************************/
.view_hash {
  margin: 20px -4px 0;
}

.view_hash .wrap_tabs.type_capsule {
  gap: 6px;
}

.view_hash .wrap_tabs.type_capsule li a,
.view_hash .wrap_tabs.type_capsule li button {
  display: inline-flex;
  padding: 8px 18px;
  background-color: var(--white);
  border-radius: 100px;
  border: 1px solid var(--gray300);
  color: #182030;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}

/**************************************************************
	고객센터 - 자주 묻는 질문 - 검색 결과값
******************************************************************/
.content_area .search_total {
  margin: 0 -4px;
  padding: 36px 0 14px 0;
  color: var(--primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.content_area .view_search {
  margin: 0 -4px;
}

.search_total>strong {
  color: var(--primary);
  font-weight: 600;
}

/**************************************************************
	고객센터 - 자주 묻는 질문 - 목록
******************************************************************/
.faq_list {
  margin-top: 22px;
}

.faq_list .list_link li a {
  display: flex;
  position: relative;
  padding: 18px 0;
}

.faq_list .list_link li a:after {
  display: block;
  position: absolute;
  top: 21px;
  right: 0;
  width: 16px;
  height: 16px;
  background: url('../images/svg/arrow_list.svg') no-repeat 0 0;
  content: '';
}

.faq_list .list_link li a .txt_q {
  margin-right: 10px;
  font-size: 20px;
  font-weight: 600;
  line-height: 21px;
}

.faq_list .list_link li a .faq_title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: calc(100% - 70px);
  max-height: 105px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: 21px;
  text-overflow: ellipsis;
}

/**************************************************************
	고객센터 - 자주 묻는 질문 - 상세, 공지사항 상세
******************************************************************/
.page_wrap.promotion .layout_container {
  padding: 0;
}

.page_wrap.promotion .content_detail {
  padding-bottom: 0;
}

.page_wrap.promotion .contents_area {
  margin: 0;
  padding: 0;
}

.page_wrap.promotion .contents_area::after {
  display: none;
}

.page_wrap.promotion .bp_box {
  position: relative;
  max-width: 430px;
  margin: 0 auto;
}

.page_wrap.promotion .bp_box .image_contents {
  position: relative;
  padding-bottom: 0;
}

.page_wrap.promotion .bp_box .image_contents .copy-text {
  position: absolute;
  /* [위치 및 크기 계산값] */
  top: 48.0588%;
  left: 50%;
  transform: translateX(-50%);
  width: 28.0952%;
  /* 236px */
  height: 2.3609%;
  /* 45px */

  /* [텍스트 스타일링] */
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  /* 이미지 글자색에 맞춰 변경 가능 */
  font-weight: 600;
  font-family: 'Pretendard', sans-serif;

  /* [반응형 폰트 사이즈] 840px 기준 60px 비중 */
  font-size: clamp(24px, 14vw, 30px);
  letter-spacing: -0.02em;
  white-space: nowrap;

  /* [기능 설정] */
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
  z-index: 5;
}

.page_wrap.promotion .bp_box .image_contents .pos-link {
  position: absolute;
  display: block;
  cursor: pointer;
  background: rgba(0, 0, 0, 0);
}

.page_wrap.promotion .bp_box .image_contents .btn-share {
  width: 7.7381%;
  height: 3.4103%;
  top: 2.0986%;
  right: 4.7619%;
}

.page_wrap.promotion .bp_box .image_contents .btn-apply {
  width: 76.1905%;
  height: 5.7712%;
  left: 11.9048%;
  bottom: 7.1878%;
}

.page_wrap.promotion .bp_box .image_contents .btn-apply2 {
  width: 88.095%;
  height: 7.591%;
  left: 5.952%;
  bottom: 5.521%;
}

.page_wrap.promotion .bp_box .txt_content {
  padding: 40px 24px;
}

.page_wrap.promotion .bp_box .txt_content .list_tit {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray700);
  letter-spacing: -0.26px;
}

.page_wrap.promotion .bp_box .txt_content .list_subtit {
  display: block;
  padding-top: 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--gray700);
  letter-spacing: -0.26px;
}

.page_wrap.promotion .bp_box .txt_content .list_tit+.list_dot {
  padding-top: 20px;
}

.page_wrap.promotion .bp_box .txt_content .list_subtit+.list_dot {
  padding-top: 5px;
}

.page_wrap.pricing_plan .bp_box {
  position: relative;
  max-width: 430px;
  margin: 0 auto;
}

.page_wrap.pricing_plan .bg_blue {
  background-color: #EAEFFF;
}

.page_wrap.pricing_plan .bg_gray {
  background-color: var(--gray100);
}

.page_wrap.pricing_plan .layout_container {
  padding: 36px 24px 24px;
}

.content_detail {
  display: flex;
  flex-direction: column;
  padding-bottom: 90px;
}

.content_detail.type_event {
  margin-top: -12px;
  padding-bottom: 24px;
}

.type_terms a {
  text-decoration: underline;
}

.type_terms table a {
  color: var(--gray700);
}

.type_terms {
  display: block;
  margin-top: 0;
  padding-bottom: 0;
}

.content_detail .title_area {
  flex: none;
}

.content_detail .title_area .title {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.4px;
  color: var(--primary);
}

.content_detail .title_area.notice .title {
  margin-top: 0px;
}

.content_detail .title_area .title:before {
  display: block;
  margin-bottom: 5px;
  color: var(--primary);
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.44px;
  content: 'Q';
}

.content_detail .title_area .category {
  margin-top: 8px;
  color: var(--gray700);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  line-height: 20px;
}

.content_detail .title_area.notice .title:before {
  content: none;
}

.content_detail .title_area.notice .category {
  color: var(--gray600);
}

.content_detail .contents_area {
  flex: auto;
  margin: 24px -24px -90px;
  padding: 24px 24px 0;
  border: 0;
  background: var(--gray100);
}

.content_detail .contents_area:after {
  content: '';
  display: block;
  padding-bottom: 90px;
}

.content_detail .contents_area img {
  width: 100%;
}

.content_detail.type_event .contents_area {
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--white);
}

.content_detail.type_terms.contents_area {
  margin: 0;
  padding: 0;
  border: 0;
}

.type_terms .terms_title {
  padding-bottom: 24px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.48px;
  line-height: 31px;
}

.type_terms .terms_title_sub {
  padding-bottom: 24px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 28px;
}

.type_terms .terms_title_sub,
.wrap_popup .type_terms .terms_title_sub {
  padding-bottom: 36px;
}

.type_terms .terms_title_sub2 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  line-height: 24px;
}

.type_terms .terms_title_sub3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 20px;
}

.type_terms table.grid_row+.terms_title_sub2,
.type_terms table.grid_column+.terms_title_sub2 {
  margin-top: 60px;
}

.type_terms .arrow_link {
  margin-bottom: 36px;
}

.type_terms .terms_text+.bullet_dot,
.type_terms .bullet_dot+.terms_text,
.type_terms .terms_text .list_num li>[class^='list_'] {
  margin-top: 4px;
}

.content_detail .contents_area .txt_content {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: 20px;
}

.content_detail .contents_area .txt_content strong {
  font-weight: 600;
}

.content_detail .contents_area .txt_content+.txt_content {
  margin-top: 24px;
}

.content_detail .contents_area .txt_content+.image_contents {
  margin-top: 24px;
}

.content_detail .contents_area .image_contents {
  padding-bottom: 36px;
}

.content_detail .contents_area .image_contents img {
  display: block;
  width: 100%;
}

.content_detail .view_hash {
  padding: 24px 24px 36px 24px;
  margin: 0 -24px;
  flex: none;
}

.terms_text {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: 20px;
}

.terms_text2 {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: 18px;
}

.terms_text>a {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: 20px;
  text-decoration: underline;
}

.terms_text strong {
  font-weight: 600;
}

.terms_text .bullet_dot {
  display: block;
  font-size: 14px;
  color: var(--primary);
}

.terms_text .bullet_dot:before {
  background-color: var(--primary);
}

/***************************************************************
	고객센터 - 자주 묻는 질문 - 검색
****************************************************************/
.search_input {
  position: relative;
  height: 48px;
}

.search_input input {
  display: block;
  padding: 14px 60px 14px 64px;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  border: 0;
  background-color: var(--gray100);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--primary);
}

.search_input input::placeholder {
  font-size: 14px;
  color: var(--gray600);
}

.search_input input:focus {
  background-color: var(--white);
}

.search_input .btn_del {
  display: none;
  position: absolute;
  top: 50%;
  right: 24px;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  background: url('../images/svg/btn_input_del.svg') no-repeat 0 0;
}

.search_input.active .btn_del {
  display: block;
}

.search_input.type_search .btn_search {
  display: block;
  position: absolute;
  top: 50%;
  left: 24px;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  background: url('../images/svg/icon_search.svg') no-repeat 0 0;
}

/***************************************************************
	nodata
****************************************************************/
.nodata {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 44px;
  height: calc(var(--vh, 1vh) * 100 - 300px);
}

.nodata:before {
  display: block;
  flex: none;
  width: 42px;
  height: 42px;
  background: url('../images/svg/img_search_nodata.svg') no-repeat 0 0;
  content: '';
}

.nodata .txt_info {
  margin-top: 20px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
}

.nodata .txt_info>strong {
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  word-break: break-all;
}

.nodata .txt_info b {
  display: block;
  margin-top: 4px;
  color: var(--gray700);
  font-size: 13px;
  font-weight: 400;
}

.nodata.notice {
  padding: 0;
}

.nodata.notice .txt_info b {
  color: var(--primary);
}

.type_card .nodata .txt_info b,
.nodata.notice .txt_info b {
  margin-top: 0;
}

.type_card .nodata {
  height: calc(var(--vh, 1vh) * 100 - 250px);
}

.type_card .nodata.event {
  height: calc(var(--vh, 1vh) * 100 - 292px);
}

.type_card .nodata.event .txt_info b {
  color: var(--primary);
}

/**************************************************************
	챗봇
******************************************************************/
.wrap_btn_chat {
  position: fixed;
  right: 20px;
  bottom: 50px;
  z-index: 50;
  height: 56px;
  cursor: pointer;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
}

.wrap_btn_chat .btn_chat {
  display: block;
  position: relative;
  width: 235px;
  height: 56px;
}

.wrap_btn_chat .btn_chat:after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 72px;
  height: 56px;
  border-radius: 0 40px 40px 0;
  background: transparent url('../images/svg/img_chatbot_fold.svg') 100% 0/100% no-repeat;
  content: '';
}

.wrap_btn_chat .btn_chat.on:after,
.wrap_btn_chat .btn_chat:hover:after {
  width: 74px;
  background: #004dff url('../images/svg/img_chatbot_unfold.svg') 100% 0/100% no-repeat;
  content: '';
}

.wrap_btn_chat .txt_chat {
  position: absolute;
  right: 20px;
  width: 0;
  height: 56px;
  font-size: 0;
  transition: all 0.1s linear;
}

.wrap_btn_chat .btn_chat.on .txt_chat,
.wrap_btn_chat .btn_chat:hover .txt_chat {
  display: block;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 74px;
  padding-left: 23px;
  width: 160px;
  border-radius: 100px 0 0 100px;
  background-color: #004dff;
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.3px;
  line-height: 56px;
  white-space: nowrap;
  transition: all 0.3s linear;
}

/**************************************************************
	도움말
******************************************************************/
.wrap_advice {
  margin: 0 -24px;
  font-family: 'Pretendard', sans-serif !important;
}

.wrap_advice dt {
  padding: 18px 24px;
}

.wrap_advice div:first-of-type dt {
  padding-top: 0;
}

.wrap_advice dt>button {
  display: block;
  width: 100%;
}

.wrap_advice dt>button>span {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
  padding: 0 40px 0 24px;
  width: 100%;
  max-height: 134px;
  color: var(--primary);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: 21px;
  text-align: left;
  text-overflow: ellipsis;
  word-break: break-all;
}

.wrap_advice .active dt>button>span {
  display: block;
  overflow: visible;
  font-weight: 600;
  text-overflow: unset;
}

.wrap_advice dt>button>span:before {
  display: block;
  position: absolute;
  top: -2px;
  left: 0;
  padding-right: 10px;
  color: var(--primary);
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.36px;
  content: 'Q';
}

.wrap_advice dt>button>span:after {
  display: block;
  position: absolute;
  top: 4px;
  right: 0;
  width: 16px;
  height: 16px;
  background: url('../images/svg/arrow_down.svg') 0 0/100% no-repeat;
  content: '';
}

.wrap_advice .active dt>button>span:after {
  background: url('../images/svg/arrow_up.svg') 0 0/100% no-repeat;
}

.wrap_advice dd {
  display: none;
  margin: 0 0 18px;
  padding: 24px;
  background-color: var(--gray100);
}

.wrap_advice dd img,
.wrap_advice dd .type_imgage img {
  width: 100%;
}

.wrap_advice dd .type_text {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.28px;
}

.wrap_advice dd .type_text+* {
  margin-top: 24px;
}

.wrap_advice dd .type_imgage+* {
  margin-top: 24px;
}

/**************************************************************
	공지
******************************************************************/
.notice_category_list {
  position: fixed;
  top: 56px;
  /* 2024.12.31 헤더 살림 , 헤더없는 경우 top: 0; */
  /* 2024.12.16 헤더 제거(박상후님 요청) 헤더 존재할 경우 top: 56px; */
  left: 0;
  right: 0;
  z-index: 10;
  padding: 36px 0 24px;
  width: 100%;
  background-color: var(--white);
}

.notice_category_list .wrap_tabs.type_capsule {
  overflow-y: hidden;
  overflow-x: scroll;
  gap: 0 10px;
  flex-wrap: nowrap;
  padding: 0 20px;
  width: 100%;
  height: 41px;
  min-width: 100%;
  max-width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.notice_category_list .wrap_tabs.type_capsule::-webkit-scrollbar {
  display: none;
}

.notice_category_list .wrap_tabs.type_capsule li {
  flex: 0 0 auto;
}

.notice_category_list .wrap_tabs.type_capsule li a,
.notice_category_list .wrap_tabs.type_capsule li button {
  display: block;
  width: 100%;
  height: 41px;
  padding: 11px 16px;
  border-radius: 2px;
}

.notice_list {
  width: 100%;
}

.notice_list .list_link li+li {
  margin-top: 16px;
}

.notice_list .list_link li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px 0;
  position: relative;
  padding: 24px 64px 24px 24px;
  width: 100%;
  border-radius: 2px;
  background-color: var(--gray100);
}

.notice_list .list_link li a:after {
  display: block;
  position: absolute;
  top: 28px;
  right: 24px;
  width: 16px;
  height: 16px;
  background: url('../images/svg/arrow_list.svg') no-repeat 0 0;
  content: '';
}

.notice_list .list_link .title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
  line-height: 20px;
  word-break: break-all;
}

.notice_list .list_link .group {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 8px;
}

.notice_list .list_link .date {
  color: var(--gray600);
  font-size: 13px;
  font-weight: 400;
}

/**************************************************************
	탈퇴
******************************************************************/
/* 탈퇴완료 */
.wrap_quit_completion {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow-y: auto;
  padding: 92px 20px 140px;
  width: 100%;
  height: 100%;
}

.wrap_quit_completion h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 28px;
  text-align: center;
}

.wrap_quit_completion h1:after {
  display: block;
  margin: 40px auto 56px;
  width: 260px;
  height: 260px;
  background: url('../images/svg/bg_quit.svg') no-repeat 0 0;
  content: '';
}

.wrap_quit_completion .message {
  min-width: 335px;
  width: 100%;
  padding: 24px;
  background-color: var(--gray100);
}

.wrap_quit_completion .message p {
  font-size: 13px;
  font-weight: 400;
  line-height: 17px;
}

.wrap_quit_completion .message p+p {
  margin-top: 8px;
}

.wrap_quit_completion .message p b {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.28px;
  line-height: 17px;
}

/* 탈퇴 화면 */
.reconfirm {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 28px;
}

.reconfirm b {
  font-weight: 600;
}

.quit_title {
  padding: 40px 0 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 20px;
}

.possession_point {
  margin: 0 -4px 60px;
  padding: 24px;
  background: var(--blue100) url('../images/svg/img_coin.svg') right 24px top 18px/62px no-repeat;
  color: var(--primary);
}

.possession_point dt {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.28px;
  line-height: 17px;
}

.possession_point dd {
  margin-top: 4px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 28px;
}

.note_title {
  padding: 0 0 24px 24px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 21px;
  background: url('../images/svg/icon_exclamation.svg') 0 2px/16px no-repeat;
}

.note_msg {
  margin: 24px 0 36px;
  color: #626b7d;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.wrap_completion_check,
.wrap_quit_completion_check {
  max-height: 72px;
  margin: 40px -4px 0;
  padding: 24px;
  border-radius: 2px;
  background-color: var(--gray100);
}

.wrap_completion_check .wrap_checkbox,
.wrap_quit_completion_check .wrap_checkbox {
  gap: 0 16px;
}

.wrap_completion_check .wrap_checkbox>label,
.wrap_quit_completion_check .wrap_checkbox>label {
  font-size: 16px;
}

/**************************************************************
	약관
******************************************************************/
/* 약관 - 정의형 스타일 */
.definition_terms dt {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 20px;
}

.definition_terms dd {
  position: relative;
  margin-top: 8px;
  padding-left: 8px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: 20px;
}

.definition_terms dd:before {
  position: absolute;
  top: 8px;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #182030;
  content: '';
}

.definition_terms dd .list_num.type2 {
  margin-top: 4px;
}

.definition_terms dd .list_num,
.definition_terms dd .list_dot {
  margin-top: 8px;
}

.definition_terms dd .list_num li {
  font-size: 13px;
  color: var(--gray700);
}

.definition_terms dd+dd {
  margin-top: 8px;
}

.definition_terms+.definition_terms {
  margin-top: 24px;
}

.definition_terms strong {
  font-weight: 600;
}

/* no bullet */
.definition_terms.type2 dd {
  padding: 0;
}

.definition_terms.type2 dd a {
  text-decoration: underline;
}

.definition_terms.type2 dd:before {
  content: initial;
}

/* 목차 스타일 */
.terms_cont.index .terms_title_sub2 {
  padding-top: 36px !important;
}

.terms_cont.index .terms_title_sub+.terms_title_sub {
  padding-bottom: 16px;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.36px;
}

.definition_terms.type3 dt span:first-of-type {
  min-width: 45px;
  margin-right: 26px;
}

.definition_terms.type3 dt span {
  text-decoration: underline;
}

.definition_terms.type3 dd span:first-of-type {
  min-width: 48px;
  margin-right: 18px;
}

.definition_terms.type3 dd {
  padding-left: 20px;
}

.definition_terms.type3 dd:before {
  content: initial;
}

.definition_terms.type3 dd+dd {
  margin-top: 4px;
}

.definition_terms.type3+.definition_terms {
  margin-top: 12px;
}

/* 전체 동의 하위 항목 */
.wrap_option {
  border-top: 1px solid var(--gray200);
  padding-top: 8px;
  margin-top: 20px;
}

.wrap_option .wrap_option_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* gap: 0 12px; */
  padding: 12px 4px;
}

.wrap_option .wrap_option_item label {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.28px;
}

.wrap_option .active .wrap_option_item .wrap_checkbox>label,
.wrap_option .active .wrap_option_item .wrap_checkbox>label b {
  font-weight: 600;
}

.wrap_option .wrap_option_item .btn_link {
  /* margin-top: 4px; */
  width: 16px;
  height: 16px;
  background: url('../images/svg/arrow_link.svg') 0 0/100% no-repeat;
}

/* .wrap_option .active dt .btn_fold {
  background: url('../images/svg/arrow_up.svg') 0 0/100% no-repeat;
} 
.wrap_option dd {
  display: none;
  margin: 6px 0 18px;
  padding: 24px;
  background-color: #ebf0fb;
}
.wrap_option dd img,
.wrap_option dd .type_imgage img {
  width: 100%;
} */

/**************************************************************
	설정
******************************************************************/
.setting_title {
  margin-bottom: 4px;
  padding: 0 4px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 23px;
}

.wrap_box_list .setting_desc {
  padding: 0 4px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 400;
  line-height: 17px;
}

.wrap_box_list .setting_desc>b {
  color: #004dff;
  font-weight: 500;
}

.wrap_box_list {
  margin: 0 -24px;
  padding: 0 20px 36px;
}

.wrap_box_list+.wrap_box_list {
  border-top: 8px solid var(--gray100);
  padding-top: 36px;
}

.wrap_box_list .wrap_choice {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0 24px;
  padding: 24px;
  border-radius: 2px;
  background-color: var(--gray100);
}

.wrap_box_list .wrap_choice+.wrap_choice {
  margin-top: 16px;
}

.wrap_box_list .wrap_choice>dl dt {
  height: 28px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.32px;
  line-height: 28px;
}

.wrap_box_list .wrap_choice>dl dd {
  margin-top: 0px;
  color: var(--gray700);
  font-size: 13px;
  font-weight: 400;
  line-height: 17px;
}

.wrap_box_list .wrap_click {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  width: 100%;
  border-radius: 2px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  line-height: 21px;
  background-color: var(--gray100);
}

.wrap_box_list .wrap_click+.wrap_click {
  margin-top: 16px;
}

.wrap_box_list .wrap_click .arrow_link {
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.32px;
  line-height: 21px;
}

.wrap_box_list .wrap_click.update {
  padding: 18px 24px;
}

.wrap_box_list .wrap_click.update * {
  width: auto;
}

.wrap_box_list .wrap_click.update .btn_small {
  height: 33px;
  line-height: 33px;
}

.wrap_box_list .wrap_click .inform {
  color: var(--gray700);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
  line-height: 21px;
}

.wrap_box_list .wrap_click strong {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.32px;
  line-height: 21px;
}

.wrap_box_list .wrap_click strong b {
  margin-left: 8px;
  color: var(--secondary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.28px;
  line-height: 17px;
}

.wrap_box_list .wrap_click b.old {
  color: var(--gray700);
}

.wrap_arrow_link {
  position: relative;
  margin-bottom: 28px;
  padding: 25px 24px 25px 66px;
  border-radius: 2px;
  background-color: var(--blue100);
}

.wrap_arrow_link:before {
  content: '';
  display: block;
  position: absolute;
  transform: translateY(-50%);
  top: calc(50% + 2px);
  left: 24px;
  width: 30px;
  height: 30px;
  background: url('../images/svg/ico_alarm.svg') 0 0/100% no-repeat;
}

.wrap_arrow_link .arrow_link {
  width: 100%;
  font-size: 13px;
  color: var(--secondary);
  font-weight: 600;
  line-height: 17px;
  background: url('../images/svg/arrow_link_blue.svg') 100% 45%/16px no-repeat;
}

/* 설정 - 사업자 정보 */
/* .wrap_company_infor dl {
  padding: 24px;
  border-radius: 10px;
  background-color: var(--white);
}
.wrap_company_infor dl dt {
  color: #626b7d;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}
.wrap_company_infor dl dd {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 23px;
}
.wrap_company_infor dl dd + dt {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebf0fb;
}
.wrap_company_infor .go_link {
  margin-top: 24px;
  text-align: center;
} */

/* 설정 - 오픈소스 라이선스 */
.wrap_iframe {
  position: relative;
  margin: 0 -24px;
  width: calc(100% + 48px);
  height: 0;
}

.wrap_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100 - 90px);
}

/**************************************************************
	앱필수 업데이트
******************************************************************/
.wrap_app_update {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow-y: auto;
  padding: 72px 24px 140px;
  width: 100%;
  height: 100%;
}

.wrap_app_update h1 {
  width: 100%;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.48px;
  line-height: 28px;
  text-align: left;
}

.wrap_app_update .message {
  margin-top: 14px;
  width: 100%;
  color: var(--gray700);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  line-height: 20px;
  text-align: left;
}

.wrap_app_update .message strong {
  color: #004dff;
  font-weight: 400;
}

.wrap_app_update .logo {
  margin-top: 81px;
}

.wrap_app_update .logo>img {
  display: block;
  width: 154px;
  height: 154px;
}

.wrap_app_update .version {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 6px 0;
  margin-top: 10px;
}

.wrap_app_update .version div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 2px;
}

.wrap_app_update .version dt,
.wrap_app_update .version dd {
  font-size: 14px;
  letter-spacing: -0.3px;
  line-height: 20px;
}

.wrap_app_update .version div:last-child dt,
.wrap_app_update .version div:last-child dd {
  color: var(--secondary);
  font-weight: 600;
}

/**************************************************************
	이벤트
******************************************************************/
/* 이벤트 - 목록 */
.wrap_sorting {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 4px;
}

.wrap_sorting .btn_sorting {
  padding-right: 20px;
  background: transparent url('../images/svg/arrow_down.svg') 100% 50%/16px no-repeat;
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
  line-height: 20px;
}

.wrap_sorting .btn_sorting:disabled {
  color: var(--gray500);
  background: transparent url('../images/svg/arrow_down2.svg') 100% 50%/16px no-repeat;
}

.wrap_list_event li {
  margin-top: 16px;
}

.wrap_list_event .item_event {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  padding: 0;
  height: 144px;
}

.wrap_list_event .item_event .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  min-height: 42px;
  background: var(--white);
}

.wrap_list_event .item_event .date {
  margin: 0;
  padding-left: 4px;
  color: var(--gray700);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}

.wrap_list_event .badge {
  margin: 0;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--white);
  background-color: var(--primary);
}

.wrap_list_event .badge.selecting {
  color: var(--secondary);
  background: var(--blue300);
}

.wrap_list_event .badge.announcement {
  color: var(--white);
  background: var(--secondary);
}

.wrap_list_event .badge.end {
  color: var(--gray500);
  background: var(--gray300);
}

.wrap_list_event .item_event.type_disabled {
  pointer-events: none;
}

.wrap_list_event .item_event.type_disabled .visual:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: var(--secondary);
  opacity: 0.2;
  filter: grayscale(100%);
}

.wrap_list_event .item_event .visual {
  position: relative;
  width: 100%;
  max-height: 102px;
  background-color: var(--gray100);
}

.wrap_list_event .item_event .visual>img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

/* 이벤트 - 유형 선택 */
.wrap_list_type {
  padding-top: 14px;
}

.wrap_list_type li {
  padding: 16px 0;
  border-top: 1px solid #ebf0fb;
}

.wrap_list_type li:first-child {
  border: 0;
}

.wrap_list_type li:last-child {
  padding-bottom: 0;
}

/* 이벤트 - 보너스팩 */
.wrap_bonuspack_share {
  padding: 36px 24px 140px;
  width: 100%;
  height: 100%;
}

.wrap_bonuspack {
  position: relative;
  margin: 0 -24px;
}

.wrap_bonuspack_share .wrap_bonuspack:after {
  height: 140px;
}

.wrap_bonuspack img {
  width: 100%;
}

.wrap_bonuspack .bg_blue {
  background: var(--blue100);
}

.wrap_bonuspack .bg_gray {
  background-color: var(--gray100);
}

.wrap_bonuspack .bg_line {
  position: relative;
  background-color: var(--white);
}

.wrap_bonuspack .bg_line:after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 8px;
  background-color: var(--gray100);
}

.wrap_bonuspack .bp_box {
  position: relative;
  max-width: 375px;
  margin: 0 auto;
}

.wrap_bonuspack [class^='txt_'] {
  position: absolute;
  color: var(--gray700);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.28px;
}

.wrap_bonuspack .txt_month {
  min-width: 2ch;
  top: 86px;
  left: 24px;
}

.wrap_bonuspack .txt_point {
  top: 98px;
  left: 52px;
}

.wrap_bonuspack .txt_point span {
  display: inline-block;
  min-width: 51px;
  max-width: 51px;
  margin-right: 1px;
  text-align: right;
  color: var(--gray700);
  overflow: hidden;
}

.wrap_bonuspack .txt_period {
  top: 148px;
  left: 73px;
  font-size: 13px;
  color: var(--primary);
  line-height: 22px;
}

.wrap_bonuspack .bp_card_list {
  position: absolute;
  left: 20px;
  top: 0;
  width: 335px;
  height: 527px;
  display: flex;
  flex-direction: column;
}

.wrap_bonuspack .bp_card_list .bp_card_item {
  display: flex;
  justify-content: space-between;
  height: 16.7%;
}

.wrap_bonuspack .bp_card_list.sharing .bp_card_item {
  justify-content: flex-end;
}

.wrap_bonuspack .bp_card_item .bp_plan,
.wrap_bonuspack .bp_card_item .bp_rewards {
  position: relative;
  width: 50%;
}

.wrap_bonuspack .bp_plan a {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 24px 14px;
}

.wrap_bonuspack .bp_plan_name {
  display: flex;
  align-items: center;
  min-width: 140px;
  position: absolute;
  top: 32px;
  left: 14px;
  font-size: 15px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.3px;
}

.wrap_bonuspack .evnet .bp_plan_name:after {
  content: '';
  width: 16px;
  height: 16px;
  background: url('../images/svg/arrow_link.svg') 100% 45%/16px no-repeat;
  margin-left: auto;
}

.wrap_bonuspack .bp_plan_name b {
  font-weight: 600;
}

.wrap_bonuspack .bp_plan_name strong {
  margin-left: 4px;
  color: var(--gray700);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.24px;
}

.wrap_bonuspack .bp_rewards {
  padding: 24px 14px;
}

.wrap_bonuspack .bp_rewards .total {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.wrap_bonuspack .bp_rewards .monthly {
  display: flex;
  gap: 0 4px;
  max-width: 107px;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: -0.2px;
  color: var(--blue600);
}

.wrap_bonuspack .monthly span {
  color: var(--blue600);
}

.wrap_bonuspack .wrap_tabs {
  z-index: 10;
  width: 100%;
  background-color: var(--blue100);
  border-bottom: 1px solid var(--gray300);
}

.wrap_bonuspack .bp_tab_list {
  display: flex;
  position: relative;
}

.wrap_bonuspack .bp_tab_list {
  width: 100%;
  padding: 0 24px;
}

.wrap_bonuspack .bp_tab_list li {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.wrap_bonuspack .bp_tab_list li button {
  width: 100%;
  padding: 32px 0 10px;
  font-weight: 400;
  font-size: 14px;
  color: var(--gray700);
  line-height: 20px;
}

.wrap_bonuspack .bp_tab_list li.active button {
  font-weight: 600;
  color: var(--primary);
}

.wrap_bonuspack .bp_tab_list li.active:after {
  content: '';
  position: absolute;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--primary);
}

.wrap_bonuspack .bp_tab_content {
  position: relative;
  margin-top: 24px;
}

.wrap_bonuspack .bp_tab_content .tab_cont {
  display: none;
}

.wrap_bonuspack .bp_tab_content .tab_cont.active {
  display: block;
}

.wrap_bonuspack .bp_tooltip {
  padding: 0 20px;
}

.wrap_bonuspack .bp_tooltip>button {
  position: absolute;
  left: 170px;
  top: 38px;
  width: 16px;
  height: 16px;
  padding: 14px;
}

.wrap_bonuspack .tooltip_cont {
  display: none;
  position: absolute;
  margin-top: -8px;
  z-index: 12;
}

.wrap_bonuspack .tooltip_cont>button {
  position: absolute;
  right: 17px;
  top: 9px;
  width: 16px;
  height: 16px;
  padding: 16px;
}

.wrap_bonuspack .bp_tooltip.show .tooltip_cont {
  display: block;
}

.wrap_bonuspack .bg_gray .btn_notice {
  width: 100%;
  height: 40px;
  position: absolute;
  left: 0px;
  top: 28px;
}

.wrap_bonuspack .bg_gray .notice_cont {
  display: none;
}

.wrap_bonuspack .bg_gray.open .notice_tit {
  display: none;
}

.wrap_bonuspack .bg_gray.open .notice_cont {
  display: block;
}

.wrap_bonuspack .bg_gray:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 60px;
  background-color: var(--gray100);
}

/* 이벤트 - 친구초대 */
.wrap_invite {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 92px 24px 140px;
  background: linear-gradient(to bottom, var(--blue100) 0%, var(--blue100) calc(100% - 140px), var(--white) calc(100% - 140px), var(--white) 100%);
}

.wrap_invite .invite_tit {
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.4px;
}

.wrap_invite .invite_subtit {
  margin-top: 6px;
  color: var(--gray700);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.3px;
}

.wrap_invite .invite_point_box {
  position: relative;
  width: 240px;
  height: 190px;
  margin: 30px auto 0px;
  overflow: hidden;
}

.wrap_invite .box_blue {
  margin: 0 -24px;
  padding: 40px 24px 30px;
}